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