🔧 Fixed value update issue in the react-select dropdowns

src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx

@@ -6,10 +6,11 @@ import { withAsyncPaginate } from "react-select-async-paginate";
 const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
 export const AsyncSelectPaginate = (props): ReactElement => {
-  const [value, onValueChange] = useState(null);
+  console.log(props);
+  const [value, setValue] = useState(null);
   const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
-  const mudasir = useCallback((query, loadedOptions, { page }) => {
+  const loadData = useCallback((query, loadedOptions, { page }) => {
     return fetchMetronResource({
       method: "GET",
       resource: props.metronResource,
@@ -25,11 +26,11 @@ export const AsyncSelectPaginate = (props): ReactElement => {
       SelectComponent={Creatable}
       debounceTimeout={200}
       isDisabled={isAddingInProgress}
-      value={value}
+      value={props.value}
-      loadOptions={mudasir}
+      loadOptions={loadData}
       placeholder={props.placeholder}
       // onCreateOption={onCreateOption}
-      onChange={onValueChange}
+      onChange={props.onChange}
       // cacheUniqs={[cacheUniq]}
       additional={{
         page: 1,

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -11,7 +11,16 @@ export const EditMetadataPanel = (props): ReactElement => {
   const validate = async () => {};
   const onSubmit = async () => {};
   const DayPickerAdapter = ({ input, ...rest }) => {
-    return <DatePicker {...input} {...rest} />;
+    return <DatePicker {...input} {...rest} placeholderText={"Cover Date"} />;
+  };
+  const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
+    return (
+      <AsyncSelectPaginate
+        {...input}
+        {...rest}
+        onChange={(value) => input.onChange(value)}
+      />
+    );
   };
   const dispatch = useDispatch();
 
@@ -79,35 +88,12 @@ export const EditMetadataPanel = (props): ReactElement => {
                       name="issue_year"
                       component={DayPickerAdapter}
                       className="input"
-                      placeholder="Issue Year"
                     />
                   </p>
                 </div>
               </div>
             </div>
 
-            {/* Story title */}
-            <div className="field is-horizontal">
-              <div className="field-label is-normal">
-                <label className="label">Story</label>
-              </div>
-              <div className="field-body">
-                <div className="field">
-                  <p className="control is-expanded has-icons-left">
-                    <Field
-                      name="story_title"
-                      component="input"
-                      className="input"
-                      placeholder="Story Title"
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-user-ninja"></i>
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-
             {/* Publisher */}
             <div className="field is-horizontal">
               <div className="field-label is-normal">
@@ -116,8 +102,14 @@ export const EditMetadataPanel = (props): ReactElement => {
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
-                    <AsyncSelectPaginate
+                    <Field
-                      placeholder={"Publisher"}
+                      name={"publisher"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        <div>
+                          <i className="fas fa-print"></i> Publisher
+                        </div>
+                      }
                       metronResource={"publisher"}
                     />
                   </p>
@@ -125,6 +117,29 @@ export const EditMetadataPanel = (props): ReactElement => {
               </div>
             </div>
 
+            {/* Arc */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Story Arc</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"story_arc"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        <div>
+                          <i className="fas fa-book-open"></i> Story Arc
+                        </div>
+                      }
+                      metronResource={"arc"}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
             {/* series */}
             <div className="field is-horizontal">
               <div className="field-label is-normal">
@@ -133,8 +148,14 @@ export const EditMetadataPanel = (props): ReactElement => {
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
-                    <AsyncSelectPaginate
+                    <Field
-                      placeholder={"Series"}
+                      name={"series"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        <div>
+                          <i className="fas fa-layer-group"></i> Series
+                        </div>
+                      }
                       metronResource={"series"}
                     />
                   </p>
@@ -181,8 +202,14 @@ export const EditMetadataPanel = (props): ReactElement => {
                     <div className="field-body">
                       <div className="field">
                         <p className="control">
-                          <AsyncSelectPaginate
+                          <Field
-                            placeholder={"Creator"}
+                            name={`${name}.creator`}
+                            component={AsyncSelectPaginateAdapter}
+                            placeholder={
+                              <div>
+                                <i className="fas fa-book-open"></i> Creator
+                              </div>
+                            }
                             metronResource={"creator"}
                           />
                         </p>
@@ -191,10 +218,10 @@ export const EditMetadataPanel = (props): ReactElement => {
                       <div className="field">
                         <p className="control">
                           <Field
-                            name={`${name}.lastName`}
+                            name={`${name}.role`}
-                            component="input"
+                            metronResource={"role"}
-                            className="input"
+                            placeholder={"Role"}
-                            placeholder="role"
+                            component={AsyncSelectPaginateAdapter}
                           />
                         </p>
                       </div>
@@ -210,6 +237,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                 ))
               }
             </FieldArray>
+            <pre>{JSON.stringify(values, undefined, 2)}</pre>
           </form>
         )}
       />