Remove requiredMessage prop

Author: Rall3n

packages/react-select/src/Select.tsx

@@ -262,8 +262,6 @@ export interface Props<
   value: PropsValue<Option>;
   /** Sets the form attribute on the input */
   form?: string;
-  /** Text to display if the component fails the `required` validation  */
-  requiredMessage: () => string;
   /** Marks the value-holding input as required for form validation */
   required?: boolean;
 }
@@ -1562,7 +1560,7 @@ export default class Select<
       tabIndex,
       form,
       menuIsOpen,
-      required
+      required,
     } = this.props;
     const { Input } = this.getComponents();
     const { inputIsHidden, ariaSelection } = this.state;
@@ -1976,20 +1974,13 @@ export default class Select<
     );
   }
   renderFormField() {
-    const { delimiter, isDisabled, isMulti, name, required, requiredMessage } =
-      this.props;
+    const { delimiter, isDisabled, isMulti, name, required } = this.props;
     const { selectValue } = this.state;
 
     if (!name || isDisabled) return;
 
     if (required && !this.hasValue()) {
-      return (
-        <RequiredInput
-          name={name}
-          onFocus={this.onValueInputFocus}
-          requiredMessage={requiredMessage}
-        />
-      );
+      return <RequiredInput name={name} onFocus={this.onValueInputFocus} />;
     }
 
     if (isMulti) {

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

@@ -1,65 +1,30 @@
 /** @jsx jsx */
-import {
-  FocusEventHandler,
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { FocusEventHandler, FunctionComponent } from 'react';
 import { jsx } from '@emotion/react';
 
-interface Props {
+const RequiredInput: FunctionComponent<{
   readonly name: string;
-  readonly requiredMessage: () => string;
   readonly onFocus: FocusEventHandler<HTMLInputElement>;
-}
-
-const RequiredInput: FunctionComponent<Props> = ({
-  name,
-  requiredMessage,
-  onFocus,
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(
-    () => () => {
-      // Reset validity on unmount
-      inputRef.current?.setCustomValidity('');
-    },
-    []
-  );
-
-  const onInvalid = useCallback(() => {
-    inputRef.current?.setCustomValidity(requiredMessage());
-  }, [requiredMessage]);
-
-  useEffect(() => {
-    onInvalid();
-  }, [onInvalid]);
-
-  return (
-    <input
-      required
-      name={name}
-      tabIndex={-1}
-      ref={inputRef}
-      onFocus={onFocus}
-      onInvalid={onInvalid}
-      css={{
-        label: 'requiredInput',
-        opacity: 0,
-        pointerEvents: 'none',
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        width: '100%',
-      }}
-      // Prevent `Switching from uncontrolled to controlled` error
-      value=""
-      onChange={() => {}}
-    />
-  );
-};
+}> = ({ name, onFocus }) => (
+  <input
+    required
+    name={name}
+    tabIndex={-1}
+    onFocus={onFocus}
+    css={{
+      label: 'requiredInput',
+      opacity: 0,
+      pointerEvents: 'none',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: '100%',
+    }}
+    // Prevent `Switching from uncontrolled to controlled` error
+    value=""
+    onChange={() => {}}
+  />
+);
 
 export default RequiredInput;