[BUGFIX] Replace bootstrap button toggle with css based toggle

Bootstrap 5 dropped the support for data-bs-toggle="buttons". See: twbs/bootstrap#30650 The replacement is to use the class "btn-check" in combination with the state of input fields. This has been done in the Localization module. Some other occurrences didn't rely on the bootstrap js and it was enough to simply remove the data attribute. Also remove a forgotten console.log debug. Resolves: #95048 Releases: master Change-Id: Icd31e7cc0cb9eb1581a7bcfe1448ed7dad24a935 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70832 Tested-by: Oliver Bartsch <[email protected]> Tested-by: core-ci <[email protected]> Tested-by: Benni Mack <[email protected]> Reviewed-by: Oliver Bartsch <[email protected]> Reviewed-by: Benni Mack <[email protected]>
TYPO3 · Aug 31, 2021 · 693cc79 · 693cc79
1 parent ed62856
commit 693cc79
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Localization.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Localization.ts
@@ -148,32 +148,32 @@ class Localization {
 
                   Wizard.getComponent().on('click', '.t3js-language-option', (optionEvt: JQueryEventObject): void => {
                     const $me = $(optionEvt.currentTarget);
-                    const $radio = $me.find('input[type="radio"]');
+                    const $radio = $me.prev();
 
                     this.sourceLanguage = $radio.val();
-                    console.log('Localization.ts@132', this.sourceLanguage);
                     Wizard.unlockNextStep();
                   });
 
-                  const $languageButtons = $('<div />', {class: 'row', 'data-bs-toggle': 'buttons'});
+                  const $languageButtons = $('<div />', {class: 'row'});
 
                   for (const languageObject of result) {
+                    const id: string = 'language' + languageObject.uid;
+                    const $input: JQuery = $('<input />', {
+                      type: 'radio',
+                      name: 'language',
+                      id: id,
+                      value: languageObject.uid,
+                      style: 'display: none;',
+                      class: 'btn-check'
+                    });
+                    const $label: JQuery = $('<label />', {class: 'btn btn-default btn-block t3js-language-option option', 'for': id})
+                      .text(' ' + languageObject.title)
+                      .prepend(languageObject.flagIcon);
+
                     $languageButtons.append(
-                      $('<div />', {class: 'col-sm-4'}).append(
-                        $('<label />', {class: 'btn btn-default btn-block t3js-language-option option'})
-                          .text(' ' + languageObject.title)
-                          .prepend(languageObject.flagIcon)
-                          .prepend(
-                            $('<input />', {
-                              type: 'radio',
-                              name: 'language',
-                              id: 'language' + languageObject.uid,
-                              value: languageObject.uid,
-                              style: 'display: none;',
-                            },
-                            ),
-                          ),
-                      ),
+                      $('<div />', {class: 'col-sm-4'})
+                        .append($input)
+                        .append($label),
                     );
                   }
                   $slide.empty().append($languageButtons);

diff --git a/...sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html b/...sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html
@@ -47,8 +47,7 @@ <h4 class="panel-title">
                                             <label for="ratio-{cropVariantIterator.cycle}">
                                                 <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
                                             </label>
-                                            <div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons"
-                                                        data-bs-toggle="buttons">
+                                            <div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons">
                                                 <f:for each="{cropVariant.allowedAspectRatios}" as="ratio" iteration="ratioIterator">
                                                     <label class="btn btn-secondary" data-method="setAspectRatio" data-bs-option="{ratio.id}" title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}">
                                                         <input

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Localization.js b/typo3/sysext/backend/Resources/Public/JavaScript/Localization.js
diff --git a/typo3/sysext/install/Classes/Service/UpgradeWizardsService.php b/typo3/sysext/install/Classes/Service/UpgradeWizardsService.php
@@ -331,7 +331,7 @@ public function getWizardUserInput(string $identifier): array
             $markup[] = '    </div>';
             $markup[] = '    <div class="panel-body">';
             $markup[] = '        <p>' . nl2br(htmlspecialchars($updateObject->getConfirmation()->getMessage())) . '</p>';
-            $markup[] = '        <div class="btn-group" data-bs-toggle="buttons">';
+            $markup[] = '        <div class="btn-group">';
             if (!$updateObject->getConfirmation()->isRequired()) {
                 $markup[] = '        <input ' . GeneralUtility::implodeAttributes($radioAttributes, true) . ' checked id="upgrade-wizard-deny">';
                 $markup[] = '        <label class="btn btn-default" for="upgrade-wizard-deny">' . $updateObject->getConfirmation()->getDeny() . '</label>';