diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js index fbbaa140efc0..dd6afe4476a2 100644 --- 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"> - - - - + + + + ); @@ -98,10 +101,10 @@ export const Inline = () => { labelText="Select" helperText="Optional helper text"> - - - - + + + + ); @@ -126,8 +129,11 @@ export const _WithLayer = () => ( labelText="" helperText="Optional helper text"> - - + + )} @@ -142,10 +148,13 @@ export const Playground = (args) => { helperText="Optional helper text" {...args}> - - - - + + + + ); diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx index 8fb3db2e2d4b..a8a57368f27a 100644 --- 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,6 +149,7 @@ const Select = React.forwardRef(function Select( size, warn = false, warnText, + onChange, ...other }: SelectProps, ref: ForwardedRef @@ -155,6 +157,7 @@ const Select = React.forwardRef(function Select( 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 index f2608b3577c0..c84cc8d12c88 100644 --- 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