Skip to content

Commit d533d50

Browse files
tw15egantw15egan
authored
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
1 parent 38bb5ff commit d533d50

3 files changed

Lines changed: 33 additions & 14 deletions

File tree

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

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,13 @@ export const Default = () => {
8080
labelText="Select an option"
8181
helperText="Optional helper text">
8282
<SelectItem value="" text="" />
83-
<SelectItem value="option-1" text="Option 1" />
84-
<SelectItem value="option-2" text="Option 2" />
85-
<SelectItem value="option-3" text="Option 3" />
86-
<SelectItem value="option-4" text="Option 4" />
83+
<SelectItem
84+
value="An example option that is really long to show what should be done to handle long text"
85+
text="An example option that is really long to show what should be done to handle long text"
86+
/>
87+
<SelectItem value="Option 2" text="Option 2" />
88+
<SelectItem value="Option 3" text="Option 3" />
89+
<SelectItem value="Option 4" text="Option 4" />
8790
</Select>
8891
</div>
8992
);
@@ -98,10 +101,10 @@ export const Inline = () => {
98101
labelText="Select"
99102
helperText="Optional helper text">
100103
<SelectItem value="" text="" />
101-
<SelectItem value="option-1" text="Option 1" />
102-
<SelectItem value="option-2" text="Option 2" />
103-
<SelectItem value="option-3" text="Option 3" />
104-
<SelectItem value="option-4" text="Option 4" />
104+
<SelectItem value="Option 1" text="Option 1" />
105+
<SelectItem value="Option 2" text="Option 2" />
106+
<SelectItem value="Option 3" text="Option 3" />
107+
<SelectItem value="Option 4" text="Option 4" />
105108
</Select>
106109
</div>
107110
);
@@ -126,8 +129,11 @@ export const _WithLayer = () => (
126129
labelText=""
127130
helperText="Optional helper text">
128131
<SelectItem value="" text="" />
129-
<SelectItem value="option-1" text="Option 1" />
130-
<SelectItem value="option-2" text="Option 2" />
132+
<SelectItem
133+
value="An example option that is really long to show what should be done to handle long text"
134+
text="An example option that is really long to show what should be done to handle long text"
135+
/>
136+
<SelectItem value="Option 2" text="Option 2" />
131137
</Select>
132138
)}
133139
</WithLayer>
@@ -142,10 +148,13 @@ export const Playground = (args) => {
142148
helperText="Optional helper text"
143149
{...args}>
144150
<SelectItem value="" text="" />
145-
<SelectItem value="option-1" text="Option 1" />
146-
<SelectItem value="option-2" text="Option 2" />
147-
<SelectItem value="option-3" text="Option 3" />
148-
<SelectItem value="option-4" text="Option 4" />
151+
<SelectItem
152+
value="An example option that is really long to show what should be done to handle long text"
153+
text="An example option that is really long to show what should be done to handle long text"
154+
/>
155+
<SelectItem value="Option 2" text="Option 2" />
156+
<SelectItem value="Option 3" text="Option 3" />
157+
<SelectItem value="Option 4" text="Option 4" />
149158
</Select>
150159
</div>
151160
);

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import deprecate from '../../prop-types/deprecate';
2525
import { usePrefix } from '../../internal/usePrefix';
2626
import { FormContext } from '../FluidForm';
2727
import setupGetInstanceId from '../../tools/setupGetInstanceId';
28+
import { composeEventHandlers } from '../../tools/events';
2829

2930
const getInstanceId = setupGetInstanceId();
3031

@@ -148,13 +149,15 @@ const Select = React.forwardRef(function Select(
148149
size,
149150
warn = false,
150151
warnText,
152+
onChange,
151153
...other
152154
}: SelectProps,
153155
ref: ForwardedRef<HTMLSelectElement>
154156
) {
155157
const prefix = usePrefix();
156158
const { isFluid } = useContext(FormContext);
157159
const [isFocused, setIsFocused] = useState(false);
160+
const [title, setTitle] = useState('');
158161
const { current: selectInstanceId } = useRef(getInstanceId());
159162

160163
const selectClasses = classNames({
@@ -215,6 +218,10 @@ const Select = React.forwardRef(function Select(
215218
setIsFocused(evt.type === 'focus' ? true : false);
216219
};
217220

221+
const handleChange = (evt) => {
222+
setTitle(evt?.target?.value);
223+
};
224+
218225
const readOnlyEventHandlers = {
219226
onMouseDown: (evt) => {
220227
// NOTE: does not prevent click
@@ -244,6 +251,8 @@ const Select = React.forwardRef(function Select(
244251
disabled={disabled || undefined}
245252
aria-invalid={invalid || undefined}
246253
aria-readonly={readOnly || undefined}
254+
title={title}
255+
onChange={composeEventHandlers([onChange, handleChange])}
247256
{...readOnlyEventHandlers}
248257
ref={ref}>
249258
{children}

‎packages/styles/scss/components/select/_select.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
font-family: inherit;
5858
// reset disabled <select> opacity
5959
opacity: 1;
60+
text-overflow: ellipsis;
6061

6162
// Do not transition on background-color (see: https://github.com/carbon-design-system/carbon/issues/4464)
6263
transition: outline $duration-fast-01 motion(standard, productive);

0 commit comments

Comments
 (0)