From 86185886c1fa07e943b5b7828fab0009cca12b38 Mon Sep 17 00:00:00 2001
From: Oleksandr Soloviov <oleksandr.soloviov@intellias.com>
Date: Mon, 15 Jun 2026 16:15:52 +0200
Subject: [PATCH 1/3] Ability to customize DummyInput #6099

---
 docs/examples/CustomDummyInput.tsx            | 31 ++++++
 docs/examples/index.tsx                       |  1 +
 docs/pages/advanced/index.tsx                 | 11 +++
 docs/pages/components/index.tsx               | 12 +++
 packages/react-select/src/Select.tsx          |  5 +-
 .../src/__tests__/Select.test.tsx             | 16 ++++
 .../src/components/DummyInput.tsx             | 94 +++++++++++++++++++
 packages/react-select/src/components/index.ts |  3 +
 packages/react-select/src/index.ts            |  1 +
 .../react-select/src/internal/DummyInput.tsx  | 51 ----------
 packages/react-select/src/internal/index.ts   |  1 -
 packages/react-select/src/styles.ts           |  3 +
 12 files changed, 175 insertions(+), 54 deletions(-)
 create mode 100644 docs/examples/CustomDummyInput.tsx
 create mode 100644 packages/react-select/src/components/DummyInput.tsx
 delete mode 100644 packages/react-select/src/internal/DummyInput.tsx

diff --git a/docs/examples/CustomDummyInput.tsx b/docs/examples/CustomDummyInput.tsx
new file mode 100644
index 0000000000..a2a51ed98c
--- /dev/null
+++ b/docs/examples/CustomDummyInput.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Select, { components, DummyInputProps } from 'react-select';
+import { StateOption, stateOptions } from '../data';
+
+const DummyInput = (props: DummyInputProps<StateOption, false>) => {
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        border: '1px dashed #2684FF',
+        borderRadius: 4,
+        display: 'inline-flex',
+        gap: 6,
+        padding: '2px 6px',
+      }}
+    >
+      <span style={{ color: '#2684FF', fontSize: 11, fontWeight: 600 }}>Custom Dummy Input</span>
+      <components.DummyInput {...props} />
+    </div>
+  );
+};
+
+export default () => (
+  <Select
+    isSearchable={false}
+    options={stateOptions}
+    components={{ DummyInput }}
+    placeholder="Select an option"
+  />
+);
+
diff --git a/docs/examples/index.tsx b/docs/examples/index.tsx
index e8bff14f43..3d8371dfeb 100644
--- a/docs/examples/index.tsx
+++ b/docs/examples/index.tsx
@@ -9,6 +9,7 @@ export { default as BasicMulti } from './BasicMulti';
 export { default as BasicSingle } from './BasicSingle';
 export { default as CustomAriaLive } from './CustomAriaLive';
 export { default as CustomControl } from './CustomControl';
+export { default as CustomDummyInput } from './CustomDummyInput';
 export { default as CreatableAdvanced } from './CreatableAdvanced';
 export { default as CreatableInputOnly } from './CreatableInputOnly';
 export { default as CreateFilter } from './CreateFilter';
diff --git a/docs/pages/advanced/index.tsx b/docs/pages/advanced/index.tsx
index 2d7f8fc74a..03877b282e 100644
--- a/docs/pages/advanced/index.tsx
+++ b/docs/pages/advanced/index.tsx
@@ -8,6 +8,7 @@ import {
   CreateFilter,
   ControlledMenu,
   CustomAriaLive,
+  CustomDummyInput,
   CustomFilterOptions,
   CustomGetOptionLabel,
   CustomGetOptionValue,
@@ -164,6 +165,16 @@ export default function Advanced() {
         </ExampleWrapper>
       )}
 
+      ${(
+        <ExampleWrapper
+          label="Custom DummyInput with non-searchable Select"
+          urlPath="docs/examples/CustomDummyInput.tsx"
+          raw={require('!!raw-loader!../../examples/CustomDummyInput.tsx')}
+        >
+          <CustomDummyInput />
+        </ExampleWrapper>
+      )}
+
       ## Methods
 
       These two methods sit as callable methods on the component. They are designed
diff --git a/docs/pages/components/index.tsx b/docs/pages/components/index.tsx
index 5ce78c347e..f6e025e231 100644
--- a/docs/pages/components/index.tsx
+++ b/docs/pages/components/index.tsx
@@ -16,6 +16,7 @@ import {
   CustomMultiValueRemove,
   CustomMultiValueLabel,
   CustomControl,
+  CustomDummyInput,
   CustomGroup,
   CustomInput,
   CustomOption,
@@ -47,6 +48,7 @@ export default function Components() {
         The following components are customisable and switchable:
           * ClearIndicator
           * Control
+          * DummyInput
           * DropdownIndicator
           * DownChevron
           * CrossIcon
@@ -339,6 +341,16 @@ export default function Components() {
           </ExampleWrapper>
         )}
 
+        ${(
+          <ExampleWrapper
+            label="Custom DummyInput Example"
+            urlPath="docs/examples/CustomDummyInput.tsx"
+            raw={require('!!raw-loader!../../examples/CustomDummyInput.tsx')}
+          >
+            <CustomDummyInput />
+          </ExampleWrapper>
+        )}
+
         ### LoadingIndicator
 
         Loading indicator to be displayed in the Indicators Container when \`isLoading\`
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 146d084e20..d19f290192 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -15,7 +15,7 @@ import { MenuPlacer } from './components/Menu';
 import LiveRegion from './components/LiveRegion';
 
 import { createFilter, FilterOptionOption } from './filters';
-import { DummyInput, ScrollManager, RequiredInput } from './internal/index';
+import { ScrollManager, RequiredInput } from './internal/index';
 import { AriaLiveMessages, AriaSelection } from './accessibility/index';
 import { isAppleDevice } from './accessibility/helpers';
 
@@ -1712,7 +1712,7 @@ export default class Select<
       menuIsOpen,
       required,
     } = this.props;
-    const { Input } = this.getComponents();
+    const { DummyInput, Input } = this.getComponents();
     const { inputIsHidden, ariaSelection } = this.state;
     const { commonProps } = this;
 
@@ -1752,6 +1752,7 @@ export default class Select<
       // use a dummy input to maintain focus/blur functionality
       return (
         <DummyInput
+          {...commonProps}
           id={id}
           innerRef={this.getInputRef}
           onBlur={this.onInputBlur}
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 0313149095..1ba31b9da1 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2892,6 +2892,22 @@ test('render custom Input Component', () => {
   expect(container.querySelector('.my-input-component')).toBeInTheDocument();
 });
 
+test('render custom DummyInput Component', () => {
+  const DummyInputComponent = () => <div className="my-dummy-input-component" />;
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      isSearchable={false}
+      components={{ DummyInput: DummyInputComponent }}
+    />
+  );
+
+  expect(
+    container.querySelector('input.react-select__dummy-input')
+  ).not.toBeInTheDocument();
+  expect(container.querySelector('.my-dummy-input-component')).toBeInTheDocument();
+});
+
 test('render custom Menu Component', () => {
   const MenuComponent = () => <div className="my-menu-component" />;
   let { container } = render(
diff --git a/packages/react-select/src/components/DummyInput.tsx b/packages/react-select/src/components/DummyInput.tsx
new file mode 100644
index 0000000000..635471a780
--- /dev/null
+++ b/packages/react-select/src/components/DummyInput.tsx
@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import { InputHTMLAttributes, Ref } from 'react';
+import { jsx } from '@emotion/react';
+
+import {
+  CommonPropsAndClassName,
+  CSSObjectWithLabel,
+  GroupBase,
+} from '../types';
+import { cleanCommonProps, removeProps } from '../utils';
+
+export interface DummyInputProps<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> extends InputHTMLAttributes<HTMLInputElement>,
+    CommonPropsAndClassName<Option, IsMulti, Group> {
+  readonly innerRef: Ref<HTMLInputElement>;
+}
+
+export const dummyInputCSS = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: DummyInputProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => {
+  void props;
+  void unstyled;
+
+  return {
+    label: 'dummyInput',
+    // get rid of any default styles
+    background: 0,
+    border: 0,
+    // important! this hides the flashing cursor
+    caretColor: 'transparent',
+    fontSize: 'inherit',
+    gridArea: '1 / 1 / 2 / 3',
+    outline: 0,
+    padding: 0,
+    // important! without `width` browsers won't allow focus
+    width: 1,
+
+    // remove cursor on desktop
+    color: 'transparent',
+
+    // remove cursor on mobile whilst maintaining "scroll into view" behaviour
+    left: -100,
+    opacity: 0,
+    position: 'relative',
+    transform: 'scale(.01)',
+  };
+};
+
+const DummyInput = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: DummyInputProps<Option, IsMulti, Group>
+) => {
+  const { cx, getStyles, getClassNames, className } = props;
+  const { innerRef, ...innerProps } = cleanCommonProps(props);
+
+  // Remove animation props not meant for HTML elements
+  const filteredProps = removeProps(
+    innerProps,
+    'onExited',
+    'in',
+    'enter',
+    'exit',
+    'appear'
+  );
+
+  return (
+    <input
+      ref={innerRef}
+      {...filteredProps}
+      css={getStyles('dummyInput', props)}
+      className={cx(
+        { 'dummy-input': true },
+        getClassNames('dummyInput', props),
+        className
+      )}
+    />
+  );
+};
+
+export default DummyInput;
+
+
+
diff --git a/packages/react-select/src/components/index.ts b/packages/react-select/src/components/index.ts
index d2c9b84c5e..385ee2b9fb 100644
--- a/packages/react-select/src/components/index.ts
+++ b/packages/react-select/src/components/index.ts
@@ -23,6 +23,7 @@ import {
 } from './indicators';
 
 import Control, { ControlProps } from './Control';
+import DummyInput, { DummyInputProps } from './DummyInput';
 import Group, { GroupHeading, GroupHeadingProps, GroupProps } from './Group';
 import Input, { InputProps } from './Input';
 import Menu, {
@@ -55,6 +56,7 @@ export interface SelectComponents<
 > {
   ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
   Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
+  DummyInput: ComponentType<DummyInputProps<Option, IsMulti, Group>>;
   DropdownIndicator: ComponentType<
     DropdownIndicatorProps<Option, IsMulti, Group>
   > | null;
@@ -103,6 +105,7 @@ export type SelectComponentsConfig<
 export const components = {
   ClearIndicator: ClearIndicator,
   Control: Control,
+  DummyInput: DummyInput,
   DropdownIndicator: DropdownIndicator,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
diff --git a/packages/react-select/src/index.ts b/packages/react-select/src/index.ts
index 312aab9f03..93ef2ffd6b 100644
--- a/packages/react-select/src/index.ts
+++ b/packages/react-select/src/index.ts
@@ -24,6 +24,7 @@ export type {
   ValueContainerProps,
 } from './components/containers';
 export type { ControlProps } from './components/Control';
+export type { DummyInputProps } from './components/DummyInput';
 export type { GroupProps, GroupHeadingProps } from './components/Group';
 export type {
   ClearIndicatorProps,
diff --git a/packages/react-select/src/internal/DummyInput.tsx b/packages/react-select/src/internal/DummyInput.tsx
deleted file mode 100644
index 0d73c9d313..0000000000
--- a/packages/react-select/src/internal/DummyInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/** @jsx jsx */
-import { JSX, Ref } from 'react';
-import { jsx } from '@emotion/react';
-import { removeProps } from '../utils';
-
-export default function DummyInput({
-  innerRef,
-  ...props
-}: JSX.IntrinsicElements['input'] & {
-  readonly innerRef: Ref<HTMLInputElement>;
-}) {
-  // Remove animation props not meant for HTML elements
-  const filteredProps = removeProps(
-    props,
-    'onExited',
-    'in',
-    'enter',
-    'exit',
-    'appear'
-  );
-
-  return (
-    <input
-      ref={innerRef}
-      {...filteredProps}
-      css={{
-        label: 'dummyInput',
-        // get rid of any default styles
-        background: 0,
-        border: 0,
-        // important! this hides the flashing cursor
-        caretColor: 'transparent',
-        fontSize: 'inherit',
-        gridArea: '1 / 1 / 2 / 3',
-        outline: 0,
-        padding: 0,
-        // important! without `width` browsers won't allow focus
-        width: 1,
-
-        // remove cursor on desktop
-        color: 'transparent',
-
-        // remove cursor on mobile whilst maintaining "scroll into view" behaviour
-        left: -100,
-        opacity: 0,
-        position: 'relative',
-        transform: 'scale(.01)',
-      }}
-    />
-  );
-}
diff --git a/packages/react-select/src/internal/index.ts b/packages/react-select/src/internal/index.ts
index 77823425dc..d321045508 100644
--- a/packages/react-select/src/internal/index.ts
+++ b/packages/react-select/src/internal/index.ts
@@ -1,4 +1,3 @@
 export { default as A11yText } from './A11yText';
-export { default as DummyInput } from './DummyInput';
 export { default as ScrollManager } from './ScrollManager';
 export { default as RequiredInput } from './RequiredInput';
diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index 0e0e1b863b..11f5efefa1 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -7,6 +7,7 @@ import {
   ValueContainerProps,
 } from './components/containers';
 import { ControlProps, css as controlCSS } from './components/Control';
+import { dummyInputCSS, DummyInputProps } from './components/DummyInput';
 import {
   groupCSS,
   groupHeadingCSS,
@@ -57,6 +58,7 @@ export interface StylesProps<
   clearIndicator: ClearIndicatorProps<Option, IsMulti, Group>;
   container: ContainerProps<Option, IsMulti, Group>;
   control: ControlProps<Option, IsMulti, Group>;
+  dummyInput: DummyInputProps<Option, IsMulti, Group>;
   dropdownIndicator: DropdownIndicatorProps<Option, IsMulti, Group>;
   group: GroupProps<Option, IsMulti, Group>;
   groupHeading: GroupHeadingProps<Option, IsMulti, Group>;
@@ -87,6 +89,7 @@ export const defaultStyles: {
   clearIndicator: clearIndicatorCSS,
   container: containerCSS,
   control: controlCSS,
+  dummyInput: dummyInputCSS,
   dropdownIndicator: dropdownIndicatorCSS,
   group: groupCSS,
   groupHeading: groupHeadingCSS,

From 0443f3f6204786439b5818af66ce08e032f289d6 Mon Sep 17 00:00:00 2001
From: Oleksandr Soloviov <oleksandr.soloviov@intellias.com>
Date: Mon, 15 Jun 2026 16:36:07 +0200
Subject: [PATCH 2/3] Ability to customize DummyInput #6099

---
 .changeset/empty-suits-flow.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/empty-suits-flow.md

diff --git a/.changeset/empty-suits-flow.md b/.changeset/empty-suits-flow.md
new file mode 100644
index 0000000000..35124fd3bf
--- /dev/null
+++ b/.changeset/empty-suits-flow.md
@@ -0,0 +1,7 @@
+---
+'@react-select/docs': minor
+'react-select': minor
+'storybook': minor
+---
+
+Ability to customize the DummyInput component

From 0439ce3297f1379d908f0794c027f53bbdf96875 Mon Sep 17 00:00:00 2001
From: Oleksandr Soloviov <oleksandr.soloviov@intellias.com>
Date: Mon, 15 Jun 2026 17:31:37 +0200
Subject: [PATCH 3/3] Ability to customize DummyInput #6099

---
 docs/examples/CustomDummyInput.tsx                  | 5 +++--
 packages/react-select/src/__tests__/Select.test.tsx | 8 ++++++--
 packages/react-select/src/components/DummyInput.tsx | 3 ---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/examples/CustomDummyInput.tsx b/docs/examples/CustomDummyInput.tsx
index a2a51ed98c..27dc7b035c 100644
--- a/docs/examples/CustomDummyInput.tsx
+++ b/docs/examples/CustomDummyInput.tsx
@@ -14,7 +14,9 @@ const DummyInput = (props: DummyInputProps<StateOption, false>) => {
         padding: '2px 6px',
       }}
     >
-      <span style={{ color: '#2684FF', fontSize: 11, fontWeight: 600 }}>Custom Dummy Input</span>
+      <span style={{ color: '#2684FF', fontSize: 11, fontWeight: 600 }}>
+        Custom Dummy Input
+      </span>
       <components.DummyInput {...props} />
     </div>
   );
@@ -28,4 +30,3 @@ export default () => (
     placeholder="Select an option"
   />
 );
-
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 1ba31b9da1..dbb8e5085f 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2893,7 +2893,9 @@ test('render custom Input Component', () => {
 });
 
 test('render custom DummyInput Component', () => {
-  const DummyInputComponent = () => <div className="my-dummy-input-component" />;
+  const DummyInputComponent = () => (
+    <div className="my-dummy-input-component" />
+  );
   let { container } = render(
     <Select
       {...BASIC_PROPS}
@@ -2905,7 +2907,9 @@ test('render custom DummyInput Component', () => {
   expect(
     container.querySelector('input.react-select__dummy-input')
   ).not.toBeInTheDocument();
-  expect(container.querySelector('.my-dummy-input-component')).toBeInTheDocument();
+  expect(
+    container.querySelector('.my-dummy-input-component')
+  ).toBeInTheDocument();
 });
 
 test('render custom Menu Component', () => {
diff --git a/packages/react-select/src/components/DummyInput.tsx b/packages/react-select/src/components/DummyInput.tsx
index 635471a780..8c030aa9a9 100644
--- a/packages/react-select/src/components/DummyInput.tsx
+++ b/packages/react-select/src/components/DummyInput.tsx
@@ -89,6 +89,3 @@ const DummyInput = <
 };
 
 export default DummyInput;
-
-
-