[Enterprise Search]Fix cursor jumping form inputs. (elastic#173659)

## Summary Moved all inputs to separate components with internal inner values. https://github.com/elastic/kibana/assets/1410658/2155049d-d6bc-4c28-8ddb-0201af080a9d ### Checklist Delete any items that are not applicable to this PR. - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
pheyos · Dec 20, 2023 · 9d1feb5 · 9d1feb5
1 parent c3b3194
commit 9d1feb5
Showing 1 changed file with 128 additions and 64 deletions.
diff --git a/packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx b/packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx
@@ -41,6 +41,109 @@ interface ConnectorConfigurationFieldProps {
   setConfigValue: (value: number | string | boolean | null) => void;
 }
 
+interface ConfigInputFieldProps {
+  configEntry: ConfigEntryView;
+  isLoading: boolean;
+  validateAndSetConfigValue: (value: string) => void;
+}
+export const ConfigInputField: React.FC<ConfigInputFieldProps> = ({
+  configEntry,
+  isLoading,
+  validateAndSetConfigValue,
+}) => {
+  const { isValid, required, placeholder, value } = configEntry;
+  const [innerValue, setInnerValue] = useState(value);
+  return (
+    <EuiFieldText
+      disabled={isLoading}
+      required={required}
+      value={ensureStringType(innerValue)}
+      isInvalid={!isValid}
+      onChange={(event) => {
+        setInnerValue(event.target.value);
+        validateAndSetConfigValue(event.target.value);
+      }}
+      placeholder={placeholder}
+    />
+  );
+};
+
+export const ConfigInputTextArea: React.FC<ConfigInputFieldProps> = ({
+  isLoading,
+  configEntry,
+  validateAndSetConfigValue,
+}) => {
+  const { isValid, required, placeholder, value } = configEntry;
+  const [innerValue, setInnerValue] = useState(value);
+  return (
+    <EuiTextArea
+      disabled={isLoading}
+      required={required}
+      // ensures placeholder shows up when value is empty string
+      value={ensureStringType(innerValue) || undefined}
+      isInvalid={!isValid}
+      onChange={(event) => {
+        setInnerValue(event.target.value);
+        validateAndSetConfigValue(event.target.value);
+      }}
+      placeholder={placeholder}
+    />
+  );
+};
+
+export const ConfigSensitiveTextArea: React.FC<ConfigInputFieldProps> = ({
+  isLoading,
+  configEntry,
+  validateAndSetConfigValue,
+}) => {
+  const { key, label, tooltip } = configEntry;
+  return (
+    <EuiAccordion
+      id={key + '-accordion'}
+      buttonContent={
+        tooltip ? (
+          <EuiFlexGroup gutterSize="xs">
+            <EuiFlexItem>
+              <p>{label}</p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="questionInCircle" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          <p>{label}</p>
+        )
+      }
+    >
+      <ConfigInputTextArea
+        isLoading={isLoading}
+        configEntry={configEntry}
+        validateAndSetConfigValue={validateAndSetConfigValue}
+      />
+    </EuiAccordion>
+  );
+};
+export const ConfigInputPassword: React.FC<ConfigInputFieldProps> = ({
+  isLoading,
+  configEntry,
+  validateAndSetConfigValue,
+}) => {
+  const { required, value } = configEntry;
+  const [innerValue, setInnerValue] = useState(value);
+  return (
+    <EuiFieldPassword
+      disabled={isLoading}
+      required={required}
+      type="dual"
+      value={ensureStringType(innerValue)}
+      onChange={(event) => {
+        setInnerValue(event.target.value);
+        validateAndSetConfigValue(event.target.value);
+      }}
+    />
+  );
+};
+
 export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldProps> = ({
   configEntry,
   isLoading,
@@ -53,18 +156,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
     setConfigValue(ensureCorrectTyping(configEntry.type, value));
   };
 
-  const {
-    key,
-    display,
-    isValid,
-    label,
-    options,
-    required,
-    placeholder,
-    sensitive,
-    tooltip,
-    value,
-  } = configEntry;
+  const { key, display, label, options, required, sensitive, tooltip, value } = configEntry;
 
   switch (display) {
     case DisplayType.DROPDOWN:
@@ -92,51 +184,30 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
 
     case DisplayType.NUMERIC:
       return (
-        <EuiFieldText
-          disabled={isLoading}
-          required={required}
-          value={ensureStringType(value)}
-          isInvalid={!isValid}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
-          placeholder={placeholder}
+        <ConfigInputField
+          key={key}
+          isLoading={isLoading}
+          configEntry={configEntry}
+          validateAndSetConfigValue={validateAndSetConfigValue}
         />
       );
 
     case DisplayType.TEXTAREA:
       const textarea = (
-        <EuiTextArea
-          disabled={isLoading}
-          placeholder={placeholder}
-          required={required}
-          value={ensureStringType(value) || undefined} // ensures placeholder shows up when value is empty string
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
+        <ConfigInputTextArea
+          key={sensitive ? key + '-sensitive-text-area' : key + 'text-area'}
+          isLoading={isLoading}
+          configEntry={configEntry}
+          validateAndSetConfigValue={validateAndSetConfigValue}
         />
       );
 
       return sensitive ? (
-        <EuiAccordion
-          id={key + '-accordion'}
-          buttonContent={
-            tooltip ? (
-              <EuiFlexGroup gutterSize="xs">
-                <EuiFlexItem>
-                  <p>{label}</p>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiIcon type="questionInCircle" />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : (
-              <p>{label}</p>
-            )
-          }
-        >
-          {textarea}
-        </EuiAccordion>
+        <ConfigSensitiveTextArea
+          isLoading={isLoading}
+          configEntry={configEntry}
+          validateAndSetConfigValue={validateAndSetConfigValue}
+        />
       ) : (
         textarea
       );
@@ -210,24 +281,17 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
 
     default:
       return sensitive ? (
-        <EuiFieldPassword
-          disabled={isLoading}
-          required={required}
-          type="dual"
-          value={ensureStringType(value)}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
+        <ConfigInputPassword
+          isLoading={isLoading}
+          configEntry={configEntry}
+          validateAndSetConfigValue={validateAndSetConfigValue}
         />
       ) : (
-        <EuiFieldText
-          disabled={isLoading}
-          placeholder={placeholder}
-          required={required}
-          value={ensureStringType(value)}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
+        <ConfigInputField
+          key={key}
+          isLoading={isLoading}
+          configEntry={configEntry}
+          validateAndSetConfigValue={validateAndSetConfigValue}
         />
       );
   }