fix placeholder and test

pixiebrix · May 1, 2024 · c17b893 · c17b893
1 parent 5a8f248
commit c17b893
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/components/form/FieldTemplate.tsx b/src/components/form/FieldTemplate.tsx
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { type ReactNode, useMemo } from "react";
+import React, { type ReactNode, useMemo, useState } from "react";
 import {
   Collapse,
   FormControl,
@@ -70,6 +70,7 @@ export type CustomFieldWidgetProps<
   value: TValue;
   onChange: React.ChangeEventHandler<TInputElement>;
   setLocalError?: (error: string | null) => void;
+  isInvalid?: boolean;
 };
 export type CustomFieldWidget<
   TValue = string | string[] | number,
@@ -98,7 +99,7 @@ const FieldTemplate: <As extends React.ElementType, T = Element>(
   className,
   ...restFieldProps
 }) => {
-  const [localError, setLocalError] = React.useState<string | null>(null);
+  const [localError, setLocalError] = useState<string | null>(null);
   const localErrorAnnotation = useMemo<FieldAnnotation | null>(() => {
     if (localError == null) {
       return null;

diff --git a/src/components/form/widgets/AsyncRemoteSelectWidget.test.tsx b/src/components/form/widgets/AsyncRemoteSelectWidget.test.tsx
@@ -209,14 +209,14 @@ describe("AsyncRemoteSelectWidget", () => {
     ];
 
     optionsFactoryMock.mockImplementation(
-      async ({ query }: { query: string }) => {
-        console.log("factory mock called");
-        return options.filter((option) =>
+      async ({ query }: { query: string }) =>
+        options.filter((option) =>
           option.label.toLowerCase().includes(query.toLowerCase()),
-        );
-      },
+        ),
     );
 
+    // We need to force a re-mount of the component for the error to clear
+    rerender(null);
     rerender(
       <ConnectedFieldTemplate
         name={name}
@@ -229,7 +229,7 @@ describe("AsyncRemoteSelectWidget", () => {
 
     await waitForEffect();
 
-    await userEvent.type(screen.getByRole("combobox"), "o");
+    await userEvent.type(screen.getByRole("combobox"), "foo");
 
     expect(screen.queryByText("Oh No!")).not.toBeInTheDocument();
     expect(screen.getByText("Foo Option")).toBeInTheDocument();

diff --git a/src/components/form/widgets/AsyncRemoteSelectWidget.tsx b/src/components/form/widgets/AsyncRemoteSelectWidget.tsx
@@ -78,7 +78,8 @@ const AsyncRemoteSelectWidget: React.FC<AsyncRemoteSelectWidgetProps> = ({
   extraFactoryArgs,
   unknownOptionLabel,
   setLocalError,
-  ...asyncSelectProps
+  isInvalid,
+  ...asyncSelectPropsIn
 }) => {
   const [knownOptions, setKnownOptions] = useState<Option[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -97,7 +98,6 @@ const AsyncRemoteSelectWidget: React.FC<AsyncRemoteSelectWidgetProps> = ({
   const loadOptions = useDebouncedCallback(
     (query: string, callback: (options: Option[]) => void) => {
       const generate = async () => {
-        console.log("** generate()", { query, value, extraFactoryArgs });
         try {
           const rawOptions = (await optionsFactory({
             ...extraFactoryArgs,
@@ -145,6 +145,8 @@ const AsyncRemoteSelectWidget: React.FC<AsyncRemoteSelectWidgetProps> = ({
     selectedOption = { value, label };
   }
 
+  const { placeholder, ...asyncSelectProps } = asyncSelectPropsIn;
+
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
@@ -153,6 +155,8 @@ const AsyncRemoteSelectWidget: React.FC<AsyncRemoteSelectWidgetProps> = ({
           loadOptions={loadOptions}
           onChange={patchedOnChange}
           value={selectedOption}
+          isDisabled={isInvalid}
+          placeholder={isInvalid ? "" : placeholder}
           {...asyncSelectProps}
         />
       </div>