fix: Select component on hover shows invalid title/tooltip 15752

.all-contributorsrc

@@ -1783,6 +1783,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

@@ -327,6 +327,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>
 

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,8 +169,19 @@ 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();
+  //Set the Title of default value from the values set
+  const defaultOption = React.Children.toArray(children).find(
+    (child) => child.props?.value === other?.defaultValue
+  );
+  //If the value set does not contain any default Title value specified
+  //Consider the first value in the set as Title value
+  const firstOptionInSet = React.Children.toArray(children).filter((child) =>
+    React.isValidElement(child)
+  )[0];
+  const [title, setTitle] = useState(
+    defaultOption?.props?.value || firstOptionInSet?.props?.value
+  );
 
   const selectClasses = classNames({
     [`${prefix}--select`]: true,

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 />);