From bd4ee8ae66e581e8be1679fa4b1838451e3f23b7 Mon Sep 17 00:00:00 2001
From: Rall3n <nb.rallen@gmail.com>
Date: Sun, 10 Apr 2022 20:21:06 +0200
Subject: [PATCH] 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                    |  5 +++++
 packages/react-select/src/internal/DummyInput.tsx | 13 ++++++++++++-
 packages/react-select/src/utils.ts                | 14 ++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wet-knives-punch.md

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 `<input>` 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<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
diff --git a/packages/react-select/src/utils.ts b/packages/react-select/src/utils.ts
index 48bdfac202..a65a3eb91b 100644
--- a/packages/react-select/src/utils.ts
+++ b/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]>;
+};