fix(striker-ui): don't create functions on re-render

striker-ui/components/GeneralInitForm.tsx

@@ -1,11 +1,12 @@
 import { Box as MUIBox } from '@mui/material';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
-import createFunction from '../lib/createFunction';
 import FlexBox from './FlexBox';
 import InputWithRef, { InputForwardedRefContent } from './InputWithRef';
 import isEmpty from '../lib/isEmpty';
-import OutlinedInputWithLabel from './OutlinedInputWithLabel';
+import OutlinedInputWithLabel, {
+  OutlinedInputWithLabelProps,
+} from './OutlinedInputWithLabel';
 import pad from '../lib/pad';
 import SuggestButton from './SuggestButton';
 
@@ -19,6 +20,11 @@ type GeneralInitFormForwardRefContent = {
   };
 };
 
+type OutlinedInputWithLabelOnBlur = Exclude<
+  OutlinedInputWithLabelProps['inputProps'],
+  undefined
+>['onBlur'];
+
 const MAX_ORGANIZATION_PREFIX_LENGTH = 5;
 const MIN_ORGANIZATION_PREFIX_LENGTH = 2;
 const MAX_HOST_NUMBER_LENGTH = 2;
@@ -60,6 +66,13 @@ const buildHostName = ({
 
 const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
   (generalInitFormProps, ref) => {
+    const [
+      isShowOrganizationPrefixSuggest,
+      setIsShowOrganizationPrefixSuggest,
+    ] = useState<boolean>(false);
+    const [isShowHostNameSuggest, setIsShowHostNameSuggest] =
+      useState<boolean>(false);
+
     const organizationNameInputRef = useRef<InputForwardedRefContent<'string'>>(
       {},
     );
@@ -99,38 +112,11 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
 
       return hostName;
     };
-    const populateOrganizationPrefixInputOnBlur = createFunction(
-      {
-        condition:
-          !organizationPrefixInputRef.current.getIsChangedByUser?.call(null),
-      },
-      populateOrganizationPrefixInput,
-    );
-    const populateHostNameInputOnBlur = createFunction(
-      { condition: !hostNameInputRef.current.getIsChangedByUser?.call(null) },
-      populateHostNameInput,
-    );
-    const handleOrganizationPrefixSuggest = createFunction(
-      {
-        conditionFn: () =>
-          organizationPrefixInputRef.current.getIsChangedByUser?.call(null) ===
-            true &&
+    const isOrganizationPrefixPrereqFilled = () =>
       isEmpty([organizationNameInputRef.current.getValue?.call(null)], {
         not: true,
-          }),
-      },
-      () => {
-        const organizationPrefix = populateOrganizationPrefixInput();
-
-        if (!hostNameInputRef.current.getIsChangedByUser?.call(null)) {
-          populateHostNameInput({ organizationPrefix });
-        }
-      },
-    );
-    const handlerHostNameSuggest = createFunction(
-      {
-        conditionFn: () =>
-          hostNameInputRef.current.getIsChangedByUser?.call(null) === true &&
+      });
+    const isHostNamePrereqFilled = () =>
       isEmpty(
         [
           organizationPrefixInputRef.current.getValue?.call(null),
@@ -140,10 +126,34 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
         {
           not: true,
         },
-          ),
-      },
-      populateHostNameInput,
       );
+    const populateOrganizationPrefixInputOnBlur: OutlinedInputWithLabelOnBlur =
+      () => {
+        if (organizationPrefixInputRef.current.getIsChangedByUser?.call(null)) {
+          setIsShowOrganizationPrefixSuggest(
+            isOrganizationPrefixPrereqFilled(),
+          );
+        } else {
+          populateOrganizationPrefixInput();
+        }
+      };
+    const populateHostNameInputOnBlur: OutlinedInputWithLabelOnBlur = () => {
+      if (hostNameInputRef.current.getIsChangedByUser?.call(null)) {
+        setIsShowHostNameSuggest(isHostNamePrereqFilled());
+      } else {
+        populateHostNameInput();
+      }
+    };
+    const handleOrganizationPrefixSuggest = () => {
+      const organizationPrefix = populateOrganizationPrefixInput();
+
+      if (!hostNameInputRef.current.getIsChangedByUser?.call(null)) {
+        populateHostNameInput({ organizationPrefix });
+      }
+    };
+    const handlerHostNameSuggest = () => {
+      populateHostNameInput();
+    };
 
     useImperativeHandle(ref, () => ({
       get: () => ({
@@ -188,6 +198,7 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
             }
             ref={organizationNameInputRef}
           />
+          <FlexBox row>
             <InputWithRef
               input={
                 <OutlinedInputWithLabel
@@ -197,7 +208,10 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                   id="striker-init-general-organization-prefix"
                   inputProps={{
                     endAdornment: (
-                    <SuggestButton onClick={handleOrganizationPrefixSuggest} />
+                      <SuggestButton
+                        show={isShowOrganizationPrefixSuggest}
+                        onClick={handleOrganizationPrefixSuggest}
+                      />
                     ),
                     inputProps: {
                       maxLength: MAX_ORGANIZATION_PREFIX_LENGTH,
@@ -210,51 +224,57 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                     },
                   }}
                   label="Prefix"
+                  onChange={() => {
+                    setIsShowOrganizationPrefixSuggest(
+                      isOrganizationPrefixPrereqFilled(),
+                    );
+                  }}
                 />
               }
               ref={organizationPrefixInputRef}
             />
-        </FlexBox>
-        <FlexBox>
             <InputWithRef
               input={
                 <OutlinedInputWithLabel
                   helpMessageBoxProps={{
-                  text: "Domain name for this striker. It's also the default domain used when creating new install manifests.",
+                    text: "Number or count of this striker; this should be '1' for the first striker, '2' for the second striker, and such.",
                   }}
-                id="striker-init-general-domain-name"
+                  id="striker-init-general-host-number"
                   inputProps={{
+                    inputProps: { maxLength: MAX_HOST_NUMBER_LENGTH },
                     onBlur: populateHostNameInputOnBlur,
                     sx: {
-                    minWidth: { sm: '16em' },
-                    width: { xs: '100%', sm: '50%' },
+                      width: '5em',
                     },
                   }}
-                label="Domain name"
+                  label="Host #"
                 />
               }
-            ref={domainNameInputRef}
+              ref={hostNumberInputRef}
+              valueType="number"
             />
+          </FlexBox>
+        </FlexBox>
+        <FlexBox>
           <InputWithRef
             input={
               <OutlinedInputWithLabel
                 helpMessageBoxProps={{
-                  text: "Number or count of this striker; this should be '1' for the first striker, '2' for the second striker, and such.",
+                  text: "Domain name for this striker. It's also the default domain used when creating new install manifests.",
                 }}
-                id="striker-init-general-host-number"
+                id="striker-init-general-domain-name"
                 inputProps={{
-                  inputProps: { maxLength: MAX_HOST_NUMBER_LENGTH },
                   onBlur: populateHostNameInputOnBlur,
                   sx: {
-                    width: '5em',
+                    minWidth: { sm: '16em' },
                   },
                 }}
-                label="Host #"
+                label="Domain name"
               />
             }
-            ref={hostNumberInputRef}
-            valueType="number"
+            ref={domainNameInputRef}
           />
+
           <InputWithRef
             input={
               <OutlinedInputWithLabel
@@ -264,7 +284,10 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                 id="striker-init-general-host-name"
                 inputProps={{
                   endAdornment: (
-                    <SuggestButton onClick={handlerHostNameSuggest} />
+                    <SuggestButton
+                      show={isShowHostNameSuggest}
+                      onClick={handlerHostNameSuggest}
+                    />
                   ),
                   inputProps: {
                     style: {
@@ -276,6 +299,9 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                   },
                 }}
                 label="Host name"
+                onChange={() => {
+                  setIsShowHostNameSuggest(isHostNamePrereqFilled());
+                }}
               />
             }
             ref={hostNameInputRef}

striker-ui/components/InputWithRef.tsx

@@ -66,6 +66,7 @@ const InputWithRef = forwardRef(
     const onChange = createInputOnChangeHandler<TypeName>({
       postSet: (...args) => {
         setIsChangedByUser(true);
+        input.props.onChange?.call(null, ...args);
         postSetAppend?.call(null, ...args);
       },
       set: setValue,

striker-ui/components/SuggestButton.tsx

@@ -2,8 +2,22 @@ import { FC } from 'react';
 
 import ContainedButton, { ContainedButtonProps } from './ContainedButton';
 
-const SuggestButton: FC<ContainedButtonProps> = ({ onClick, ...restProps }) =>
-  onClick ? (
+type SuggestButtonOptionalProps = {
+  show?: boolean;
+};
+
+type SuggestButtonProps = ContainedButtonProps & SuggestButtonOptionalProps;
+
+const SUGGEST_BUTTON_DEFAULT_PROPS: Required<SuggestButtonOptionalProps> = {
+  show: true,
+};
+
+const SuggestButton: FC<SuggestButtonProps> = ({
+  onClick,
+  show: isShow = SUGGEST_BUTTON_DEFAULT_PROPS.show,
+  ...restProps
+}) =>
+  isShow ? (
     <ContainedButton {...{ onClick, tabIndex: -1, ...restProps }}>
       Suggest
     </ContainedButton>
@@ -11,4 +25,6 @@ const SuggestButton: FC<ContainedButtonProps> = ({ onClick, ...restProps }) =>
     <></>
   );
 
+SuggestButton.defaultProps = SUGGEST_BUTTON_DEFAULT_PROPS;
+
 export default SuggestButton;