fix(Select): ensure Select properly truncates long strings (#14356)

* fix(Select): adds ellipsis when text overflows * fix(Select): ensure long strings are truncated * fix(Select): fix inline styles, allow truncation * chore(Select): revert inline story changes
carbon-design-system · Aug 2, 2023 · d533d50 · d533d50
1 parent 38bb5ff
commit d533d50
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js
@@ -80,10 +80,13 @@ export const Default = () => {
         labelText="Select an option"
         helperText="Optional helper text">
         <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="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" />
       </Select>
     </div>
   );
@@ -98,10 +101,10 @@ export const Inline = () => {
         labelText="Select"
         helperText="Optional helper text">
         <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>
   );
@@ -126,8 +129,11 @@ export const _WithLayer = () => (
         labelText=""
         helperText="Optional helper text">
         <SelectItem value="" text="" />
-        <SelectItem value="option-1" text="Option 1" />
-        <SelectItem value="option-2" text="Option 2" />
+        <SelectItem
+          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" />
       </Select>
     )}
   </WithLayer>
@@ -142,10 +148,13 @@ export const Playground = (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="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" />
       </Select>
     </div>
   );

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -25,6 +25,7 @@ import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { composeEventHandlers } from '../../tools/events';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -148,13 +149,15 @@ const Select = React.forwardRef(function Select(
     size,
     warn = false,
     warnText,
+    onChange,
     ...other
   }: SelectProps,
   ref: ForwardedRef<HTMLSelectElement>
 ) {
   const prefix = usePrefix();
   const { isFluid } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
+  const [title, setTitle] = useState('');
   const { current: selectInstanceId } = useRef(getInstanceId());
 
   const selectClasses = classNames({
@@ -215,6 +218,10 @@ const Select = React.forwardRef(function Select(
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  const handleChange = (evt) => {
+    setTitle(evt?.target?.value);
+  };
+
   const readOnlyEventHandlers = {
     onMouseDown: (evt) => {
       // NOTE: does not prevent click
@@ -244,6 +251,8 @@ const Select = React.forwardRef(function Select(
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
           aria-readonly={readOnly || undefined}
+          title={title}
+          onChange={composeEventHandlers([onChange, handleChange])}
           {...readOnlyEventHandlers}
           ref={ref}>
           {children}

diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
@@ -57,6 +57,7 @@
     font-family: inherit;
     // reset disabled <select> opacity
     opacity: 1;
+    text-overflow: ellipsis;
 
     // Do not transition on background-color (see: https://github.com/carbon-design-system/carbon/issues/4464)
     transition: outline $duration-fast-01 motion(standard, productive);