Convert Form Components to TypeScript

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

Remove defaultProps from TypeScript components

(cherry picked from commit a90c13e86f798841cb6db038bb6b6d1408a00585)

Fix multi-select checkboxes not appearing

(cherry picked from commit e199710c15fbfa643a9f71c7a20f70b1722d0df6)

frontend/src/Components/Form/AutoCompleteInput.tsx

@@ -0,0 +1,81 @@
+import jdu from 'jdu';
+import React, { SyntheticEvent, useCallback, useState } from 'react';
+import {
+  ChangeEvent,
+  SuggestionsFetchRequestedParams,
+} from 'react-autosuggest';
+import { InputChanged } from 'typings/inputs';
+import AutoSuggestInput from './AutoSuggestInput';
+
+interface AutoCompleteInputProps {
+  name: string;
+  value?: string;
+  values: string[];
+  onChange: (change: InputChanged<string>) => unknown;
+}
+
+function AutoCompleteInput({
+  name,
+  value = '',
+  values,
+  onChange,
+  ...otherProps
+}: AutoCompleteInputProps) {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+
+  const getSuggestionValue = useCallback((item: string) => {
+    return item;
+  }, []);
+
+  const renderSuggestion = useCallback((item: string) => {
+    return item;
+  }, []);
+
+  const handleInputChange = useCallback(
+    (_event: SyntheticEvent, { newValue }: ChangeEvent) => {
+      onChange({
+        name,
+        value: newValue,
+      });
+    },
+    [name, onChange]
+  );
+
+  const handleInputBlur = useCallback(() => {
+    setSuggestions([]);
+  }, [setSuggestions]);
+
+  const handleSuggestionsFetchRequested = useCallback(
+    ({ value: newValue }: SuggestionsFetchRequestedParams) => {
+      const lowerCaseValue = jdu.replace(newValue).toLowerCase();
+
+      const filteredValues = values.filter((v) => {
+        return jdu.replace(v).toLowerCase().includes(lowerCaseValue);
+      });
+
+      setSuggestions(filteredValues);
+    },
+    [values, setSuggestions]
+  );
+
+  const handleSuggestionsClearRequested = useCallback(() => {
+    setSuggestions([]);
+  }, [setSuggestions]);
+
+  return (
+    <AutoSuggestInput
+      {...otherProps}
+      name={name}
+      value={value}
+      suggestions={suggestions}
+      getSuggestionValue={getSuggestionValue}
+      renderSuggestion={renderSuggestion}
+      onInputChange={handleInputChange}
+      onInputBlur={handleInputBlur}
+      onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
+      onSuggestionsClearRequested={handleSuggestionsClearRequested}
+    />
+  );
+}
+
+export default AutoCompleteInput;