message: enable image search validation on keypress
diff: @@ -11,27 +11,20 @@ import {
  ValidatedOptions,
  } from '@patternfly/react-core';
  import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
  -import { InputField } from '@console/shared';
  +import { InputField, useDebounceCallback } from '@console/shared';
  import { getSuggestedName, getPorts, makePortName } from '../../../utils/imagestream-utils';
  import { secretModalLauncher } from '../CreateSecretModal';
  import { UNASSIGNED_KEY } from '../../../const';
  const ImageSearch: React.FC = () => {
  - const {
  - values,
  - setFieldValue,
  - dirty,
  - initialValues,
  - touched,
  - setFieldTouched,
  - } = useFormikContext<FormikValues>();
  + const { values, setFieldValue, dirty, initialValues, touched } = useFormikContext<FormikValues>();
  const [newImageSecret, setNewImageSecret] = React.useState('');
  const [alertVisible, shouldHideAlert] = React.useState(true);
  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
  const namespace = values.project.name;
  - const handleSearch = React.useCallback(() => {
  - const searchTermImage = values.searchTerm;
  + const handleSearch = React.useCallback(
  + (searchTermImage: string) => {
  setFieldValue('isSearchingForImage', true);
  setValidated(ValidatedOptions.default);
  const importImage = {
  @@ -95,21 +88,27 @@ const ImageSearch: React.FC = () => {
  setFieldValue('isSearchingForImage', false);
  setValidated(ValidatedOptions.error);
  });
  - }, [
  + },
  + [
  setFieldValue,
  + touched,
  values.application.name,
  values.application.selectedKey,
  values.name,
  values.project.name,
  - values.searchTerm,
  - touched,
  initialValues.route.targetPort,
  - ]);
  + ],
  + );
  +
  + const debouncedHandleSearch = useDebounceCallback(handleSearch, [handleSearch]);
  - const handleSave = (name: string) => {
  + const handleSave = React.useCallback(
  + (name: string) => {
  setNewImageSecret(name);
  - values.searchTerm && handleSearch();
  - };
  + values.searchTerm && handleSearch(values.searchTerm);
  + },
  + [handleSearch, values.searchTerm],
  + );
  const getHelpText = () => {
  if (values.isSearchingForImage) {
  @@ -126,7 +125,7 @@ const ImageSearch: React.FC = () => {
  );
  React.useEffect(() => {
  - !dirty && values.searchTerm && handleSearch();
  + !dirty && values.searchTerm && handleSearch(values.searchTerm);
  }, [dirty, handleSearch, values.searchTerm]);
  React.useEffect(() => {
  @@ -151,9 +150,8 @@ const ImageSearch: React.FC = () => {
  helpText={getHelpText()}
  helpTextInvalid={helpTextInvalid}
  validated={validated}
  - onBlur={() => {
  - handleSearch();
  - setFieldTouched('searchTerm', true);
  + onChange={(e: KeyboardEvent) => {
  + debouncedHandleSearch((e.target as HTMLInputElement).value);
  }}
  data-test-id="deploy-image-search-term"
  required
  