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

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Enterprise Search]Fix cursor jumping form inputs.
(#173659)](https://github.com/elastic/kibana/pull/173659)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Efe Gürkan
YALAMAN","email":"efeguerkan.yalaman@elastic.co"},"sourceCommit":{"committedDate":"2023-12-20T14:20:46Z","message":"[Enterprise
Search]Fix cursor jumping form inputs. (#173659)\n\n##
Summary\r\n\r\nMoved all inputs to separate components with internal
inner
values.\r\n\r\n\r\n2155049d-d6bc-4c28-8ddb-0201af080a9d\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9d1feb5febfc5c4192d2ab11bf17555971e17195","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:EnterpriseSearch","v8.12.0","v8.13.0"],"number":173659,"url":"https://github.com/elastic/kibana/pull/173659","mergeCommit":{"message":"[Enterprise
Search]Fix cursor jumping form inputs. (#173659)\n\n##
Summary\r\n\r\nMoved all inputs to separate components with internal
inner
values.\r\n\r\n\r\n2155049d-d6bc-4c28-8ddb-0201af080a9d\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9d1feb5febfc5c4192d2ab11bf17555971e17195"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173659","number":173659,"mergeCommit":{"message":"[Enterprise
Search]Fix cursor jumping form inputs. (#173659)\n\n##
Summary\r\n\r\nMoved all inputs to separate components with internal
inner
values.\r\n\r\n\r\n2155049d-d6bc-4c28-8ddb-0201af080a9d\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9d1feb5febfc5c4192d2ab11bf17555971e17195"}}]}]
BACKPORT-->

Co-authored-by: Efe Gürkan YALAMAN <efeguerkan.yalaman@elastic.co>

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 {
+  const { key, display, label, options, required, sensitive, tooltip, value } = configEntry;
-    key,
-    display,
-    isValid,
-    label,
-    options,
-    required,
-    placeholder,
-    sensitive,
-    tooltip,
-    value,
-  } = configEntry;
 
   switch (display) {
     case DisplayType.DROPDOWN:
@@ -92,51 +184,30 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
 
     case DisplayType.NUMERIC:
       return (
-        <EuiFieldText
+        <ConfigInputField
-          disabled={isLoading}
+          key={key}
-          required={required}
+          isLoading={isLoading}
-          value={ensureStringType(value)}
+          configEntry={configEntry}
-          isInvalid={!isValid}
+          validateAndSetConfigValue={validateAndSetConfigValue}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
-          placeholder={placeholder}
         />
       );
 
     case DisplayType.TEXTAREA:
       const textarea = (
-        <EuiTextArea
+        <ConfigInputTextArea
-          disabled={isLoading}
+          key={sensitive ? key + '-sensitive-text-area' : key + 'text-area'}
-          placeholder={placeholder}
+          isLoading={isLoading}
-          required={required}
+          configEntry={configEntry}
-          value={ensureStringType(value) || undefined} // ensures placeholder shows up when value is empty string
+          validateAndSetConfigValue={validateAndSetConfigValue}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
         />
       );
 
       return sensitive ? (
-        <EuiAccordion
+        <ConfigSensitiveTextArea
-          id={key + '-accordion'}
+          isLoading={isLoading}
-          buttonContent={
+          configEntry={configEntry}
-            tooltip ? (
+          validateAndSetConfigValue={validateAndSetConfigValue}
-              <EuiFlexGroup gutterSize="xs">
+        />
-                <EuiFlexItem>
-                  <p>{label}</p>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiIcon type="questionInCircle" />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : (
-              <p>{label}</p>
-            )
-          }
-        >
-          {textarea}
-        </EuiAccordion>
       ) : (
         textarea
       );
@@ -210,24 +281,17 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
 
     default:
       return sensitive ? (
-        <EuiFieldPassword
+        <ConfigInputPassword
-          disabled={isLoading}
+          isLoading={isLoading}
-          required={required}
+          configEntry={configEntry}
-          type="dual"
+          validateAndSetConfigValue={validateAndSetConfigValue}
-          value={ensureStringType(value)}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
         />
       ) : (
-        <EuiFieldText
+        <ConfigInputField
-          disabled={isLoading}
+          key={key}
-          placeholder={placeholder}
+          isLoading={isLoading}
-          required={required}
+          configEntry={configEntry}
-          value={ensureStringType(value)}
+          validateAndSetConfigValue={validateAndSetConfigValue}
-          onChange={(event) => {
-            validateAndSetConfigValue(event.target.value);
-          }}
         />
       );
   }