diff --git a/.changeset/wet-knives-punch.md b/.changeset/wet-knives-punch.md new file mode 100644 index 0000000000..511a0192f9 --- /dev/null +++ b/.changeset/wet-knives-punch.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Prevent transition props from being forwarded to `` element in `DummyInput` component diff --git a/packages/react-select/src/internal/DummyInput.tsx b/packages/react-select/src/internal/DummyInput.tsx index 2286f019a5..4dd19134ae 100644 --- a/packages/react-select/src/internal/DummyInput.tsx +++ b/packages/react-select/src/internal/DummyInput.tsx @@ -1,6 +1,7 @@ /** @jsx jsx */ import { Ref } from 'react'; import { jsx } from '@emotion/react'; +import { removeProps } from '../utils'; export default function DummyInput({ innerRef, @@ -8,10 +9,20 @@ export default function DummyInput({ }: JSX.IntrinsicElements['input'] & { readonly innerRef: Ref; }) { + // Remove animation props not meant for HTML elements + const filteredProps = removeProps( + props, + 'onExited', + 'in', + 'enter', + 'exit', + 'appear' + ); + return ( ( ): OnChangeValue { return multiValue as OnChangeValue; } + +export const removeProps = ( + propsObj: Props, + ...properties: K +): Omit => { + let propsMap = Object.entries(propsObj).filter( + ([key]) => !properties.includes(key) + ); + + return propsMap.reduce((newProps: { [key: string]: any }, [key, val]) => { + newProps[key] = val; + return newProps; + }, {}) as Omit; +};