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

.changeset/wet-knives-punch.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Prevent transition props from being forwarded to `<input>` element in `DummyInput` component

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

@@ -1,17 +1,28 @@
 /** @jsx jsx */
 import { 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}
-      {...props}
+      {...filteredProps}
       css={{
         label: 'dummyInput',
         // get rid of any default styles

packages/react-select/src/utils.ts

@@ -367,3 +367,17 @@ export function multiValueAsValue<Option, IsMulti extends boolean>(
 ): OnChangeValue<Option, IsMulti> {
   return multiValue as OnChangeValue<Option, IsMulti>;
 }
+
+export const removeProps = <Props extends object, K extends string[]>(
+  propsObj: Props,
+  ...properties: K
+): Omit<Props, K[number]> => {
+  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<Props, K[number]>;
+};