Skip to content

Commit bd4ee8a

Browse files
authored
Prevent transition props from being forwarded to <input> element in DummyInput component (#5057)
* Fix prop warnings on animated DummyInput * Alternative way to remove props. * Prettier changes * Add changeset
1 parent 87e1443 commit bd4ee8a

File tree

3 files changed

+31
-1
lines changed

3 files changed

+31
-1
lines changed

.changeset/wet-knives-punch.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'react-select': patch
3+
---
4+
5+
Prevent transition props from being forwarded to `<input>` element in `DummyInput` component

packages/react-select/src/internal/DummyInput.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
/** @jsx jsx */
22
import { Ref } from 'react';
33
import { jsx } from '@emotion/react';
4+
import { removeProps } from '../utils';
45

56
export default function DummyInput({
67
innerRef,
78
...props
89
}: JSX.IntrinsicElements['input'] & {
910
readonly innerRef: Ref<HTMLInputElement>;
1011
}) {
12+
// Remove animation props not meant for HTML elements
13+
const filteredProps = removeProps(
14+
props,
15+
'onExited',
16+
'in',
17+
'enter',
18+
'exit',
19+
'appear'
20+
);
21+
1122
return (
1223
<input
1324
ref={innerRef}
14-
{...props}
25+
{...filteredProps}
1526
css={{
1627
label: 'dummyInput',
1728
// get rid of any default styles

packages/react-select/src/utils.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,3 +367,17 @@ export function multiValueAsValue<Option, IsMulti extends boolean>(
367367
): OnChangeValue<Option, IsMulti> {
368368
return multiValue as OnChangeValue<Option, IsMulti>;
369369
}
370+
371+
export const removeProps = <Props extends object, K extends string[]>(
372+
propsObj: Props,
373+
...properties: K
374+
): Omit<Props, K[number]> => {
375+
let propsMap = Object.entries(propsObj).filter(
376+
([key]) => !properties.includes(key)
377+
);
378+
379+
return propsMap.reduce((newProps: { [key: string]: any }, [key, val]) => {
380+
newProps[key] = val;
381+
return newProps;
382+
}, {}) as Omit<Props, K[number]>;
383+
};

0 commit comments

Comments
 (0)