fix: Select component on hover shows invalid title/tooltip (#18740)

* fix: implemented the useStatefor default and inSet-option Value display

* fix: updated Select.stories.js to reflect accurate values for the SelectedItem.

* fix: added a test case for the select dropdown text

* fix: updated all-contributors

* fix: added a child type check

* fix: added a child type wrapped check

* fix: pushed bug fix code

* fix: commit code proposed

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* fix: fixed build error

* fix: fix e2e Select component tests

* fix: addressed review comments

---------

Co-authored-by: Kanchi Bhaskar <Kanchi.Bhaskar@ibm.com>
Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: 5 people

.all-contributorsrc

@@ -1790,6 +1790,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Bhas-kar",
+      "name": "Kanchi Bhaskar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/183294521?v=4",
+      "profile": "https://github.com/Bhas-kar",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -328,6 +328,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/heloiselui"><img src="https://avatars.githubusercontent.com/u/71858203?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Heloise Lui</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Documentation">📖</a> <a href="#a11y-heloiselui" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aheloiselui" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://github.com/Tweakified"><img src="https://avatars.githubusercontent.com/u/58192912?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Smith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tweakified" title="Code">💻</a> <a href="#a11y-Tweakified" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Tweakified" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/enricobguedes"><img src="https://avatars.githubusercontent.com/u/45374536?v=4?s=100" width="100px;" alt=""/><br /><sub><b>enricobguedes</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=enricobguedes" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Bhas-kar"><img src="https://avatars.githubusercontent.com/u/183294521?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kanchi Bhaskar</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Bhas-kar" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Bhas-kar" title="Documentation">📖</a></td>
   </tr>
 </table>
 

e2e/components/Select/Select-test.avt.e2e.js

@@ -61,6 +61,6 @@ test.describe('@avt Select', () => {
     await expect(select).toHaveValue('');
     // Select Option 4
     await select.selectOption('Option 4');
-    await expect(select).toHaveValue('Option 4');
+    await expect(select).toHaveValue('option-4');
   });
 });

packages/react/src/components/Select/Select.stories.js

@@ -87,10 +87,10 @@ export const Inline = (args) => {
         helperText="Optional helper text"
         {...args}>
         <SelectItem value="" text="" />
-        <SelectItem value="Option 1" text="Option 1" />
-        <SelectItem value="Option 2" text="Option 2" />
-        <SelectItem value="Option 3" text="Option 3" />
-        <SelectItem value="Option 4" text="Option 4" />
+        <SelectItem value="option-1" text="Option 1" />
+        <SelectItem value="option-2" text="Option 2" />
+        <SelectItem value="option-3" text="Option 3" />
+        <SelectItem value="option-4" text="Option 4" />
       </Select>
     </div>
   );
@@ -117,7 +117,7 @@ export const _WithLayer = (args) => (
           value="An example option that is really long to show what should be done to handle long text"
           text="An example option that is really long to show what should be done to handle long text"
         />
-        <SelectItem value="Option 2" text="Option 2" />
+        <SelectItem value="option-2" text="Option 2" />
       </Select>
     )}
   </WithLayer>
@@ -174,9 +174,9 @@ export const withAILabel = (args) => {
           value="An example option that is really long to show what should be done to handle long text"
           text="An example option that is really long to show what should be done to handle long text"
         />
-        <SelectItem value="Option 2" text="Option 2" />
-        <SelectItem value="Option 3" text="Option 3" />
-        <SelectItem value="Option 4" text="Option 4" />
+        <SelectItem value="option-2" text="Option 2" />
+        <SelectItem value="option-3" text="Option 3" />
+        <SelectItem value="option-4" text="Option 4" />
       </Select>
     </div>
   );
@@ -201,9 +201,9 @@ export const Default = (args) => {
           value="An example option that is really long to show what should be done to handle long text"
           text="An example option that is really long to show what should be done to handle long text"
         />
-        <SelectItem value="Option 2" text="Option 2" />
-        <SelectItem value="Option 3" text="Option 3" />
-        <SelectItem value="Option 4" text="Option 4" />
+        <SelectItem value="option-2" text="Option 2" />
+        <SelectItem value="option-3" text="Option 3" />
+        <SelectItem value="option-4" text="Option 4" />
       </Select>
     </div>
   );

packages/react/src/components/Select/Select.tsx

@@ -169,9 +169,28 @@ const Select = React.forwardRef(function Select(
   const prefix = usePrefix();
   const { isFluid } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
-  const [title, setTitle] = useState('');
   const selectInstanceId = useId();
 
+  interface SelectItemProps {
+    value: any;
+    text: string;
+  }
+  // Convert children to an array of valid elements once using type narrowing
+  const validChildren = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<SelectItemProps> =>
+      React.isValidElement<SelectItemProps>(child)
+  );
+
+  // Find the default option based on the specified defaultValue
+  const defaultOption = validChildren.find(
+    (child) => child.props?.value === other?.defaultValue
+  );
+
+  // Use the default option's text if available; otherwise, fallback to the first option's text
+  const initialTitle =
+    defaultOption?.props?.text || validChildren[0]?.props?.text || '';
+
+  const [title, setTitle] = useState(initialTitle);
   const selectClasses = classNames({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
@@ -233,7 +252,8 @@ const Select = React.forwardRef(function Select(
   };
 
   const handleChange = (evt) => {
-    setTitle(evt?.target?.value);
+    const selectedOption = evt?.target?.options[evt.target.selectedIndex];
+    setTitle(selectedOption?.text);
   };
 
   const readOnlyEventHandlers = {

packages/react/src/components/Select/__tests__/Select-test.js

@@ -75,6 +75,16 @@ describe('Select', () => {
       expect(screen.getByText('Option 2')).toHaveAttribute('selected');
     });
 
+    it('should show SelectItem text as title', () => {
+      render(
+        <Select id="select" labelText="Select">
+          <SelectItem text="Option 1" value="option-1" />
+          <SelectItem text="Option 2" value="option-2" />
+        </Select>
+      );
+      expect(screen.getByLabelText('Select').title).toEqual('Option 1');
+    });
+
     it('should respect disabled prop', () => {
       render(<Select id="select" labelText="Select" disabled />);