[5.x] Fix ButtonGroup not showing active state if value are numbers (#…

…10916) Co-authored-by: Jason Varga <[email protected]>
statamic · Dec 16, 2024 · c0318e9 · c0318e9
1 parent b884d63
commit c0318e9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -7,10 +7,10 @@
                 ref="button"
                 type="button"
                 :name="name"
-                @click="updateSelectedOption($event.target.value)"
+                @click="updateSelectedOption(option.value)"
                 :value="option.value"
                 :disabled="isReadOnly"
-                :class="{'active': value === option.value}"
+                :class="{'active': value == option.value}"
                 v-text="option.label || option.value"
             />
         </div>

diff --git a/tests/Fieldtypes/HasSelectOptionsTests.php b/tests/Fieldtypes/HasSelectOptionsTests.php
@@ -14,38 +14,46 @@ public function it_preloads_options($options, $expected)
         $field = $this->field(['options' => $options]);
 
         $this->assertArrayHasKey('options', $preloaded = $field->preload());
-        $this->assertEquals($expected, $preloaded['options']);
+        $this->assertSame($expected, $preloaded['options']);
     }
 
     public static function optionsProvider()
     {
         return [
             'list' => [
-                ['one', 'two', 'three'],
+                ['one', 'two', 'three', 50, '100'],
                 [
                     ['value' => 'one', 'label' => 'one'],
                     ['value' => 'two', 'label' => 'two'],
                     ['value' => 'three', 'label' => 'three'],
+                    ['value' => 50, 'label' => 50],
+                    ['value' => '100', 'label' => '100'],
                 ],
             ],
             'associative' => [
-                ['one' => 'One', 'two' => 'Two', 'three' => 'Three'],
+                ['one' => 'One', 'two' => 'Two', 'three' => 'Three', 50 => '50', '100' => 100],
                 [
                     ['value' => 'one', 'label' => 'One'],
                     ['value' => 'two', 'label' => 'Two'],
                     ['value' => 'three', 'label' => 'Three'],
+                    ['value' => 50, 'label' => '50'],
+                    ['value' => 100, 'label' => 100],
                 ],
             ],
             'multidimensional' => [
                 [
                     ['key' => 'one', 'value' => 'One'],
                     ['key' => 'two', 'value' => 'Two'],
                     ['key' => 'three', 'value' => 'Three'],
+                    ['key' => 50, 'value' => 50],
+                    ['key' => '100', 'value' => 100],
                 ],
                 [
                     ['value' => 'one', 'label' => 'One'],
                     ['value' => 'two', 'label' => 'Two'],
                     ['value' => 'three', 'label' => 'Three'],
+                    ['value' => 50, 'label' => 50],
+                    ['value' => '100', 'label' => 100],
                 ],
             ],
         ];