Merge pull request #490 from catho/QTM-468

feat(QTM-468): Added property to set an initial value for autocomplete

Author: rapahaeru

Diff for: components/AutoComplete/AutoComplete.jsx

@@ -146,6 +146,7 @@ const AutoComplete = ({
   id,
   name,
   label,
+  value,
   error,
   disabled,
   helperText,
@@ -157,7 +158,7 @@ const AutoComplete = ({
   required,
   skin,
 }) => {
-  const [userTypedValue, setUserTypedValue] = useState('');
+  const [userTypedValue, setUserTypedValue] = useState(value);
   const [filterSuggestions, setFilterSuggestions] = useState(suggestions);
   const [filterSuggestionsLength, setFilterSuggestionsLength] = useState(
     filterSuggestions.length,
@@ -174,24 +175,24 @@ const AutoComplete = ({
   } 
   ${cursor + 1} de ${filterSuggestionsLength} está destacado`;
 
-  const filterItems = value =>
+  const filterItems = currentValue =>
     suggestions.filter(suggestion => {
       let option = normalizeChars(suggestion.toLowerCase());
       option = normalizeChars(option);
-      return option.indexOf(normalizeChars(value.toLowerCase())) > -1;
+      return option.indexOf(normalizeChars(currentValue.toLowerCase())) > -1;
     });
 
-  const handleFilter = value => {
-    const filteredValues = filterItems(value);
+  const handleFilter = currentValue => {
+    const filteredValues = filterItems(currentValue);
     setShowSuggestions(!!filteredValues.length);
     setFilterSuggestions(filteredValues);
   };
 
-  const handleChange = value => {
-    setUserTypedValue(value);
-    onChange(value);
+  const handleChange = currentValue => {
+    setUserTypedValue(currentValue);
+    onChange(currentValue);
     setCursor(0);
-    handleFilter(value);
+    handleFilter(currentValue);
   };
 
   const handleClickOutside = event => {
@@ -393,6 +394,7 @@ AutoComplete.propTypes = {
   disabled: PropTypes.bool,
   /** Displays a label text that describes the field */
   label: PropTypes.string,
+  value: PropTypes.string,
   name: PropTypes.string,
   placeholder: PropTypes.string,
   /** Callback function to receive what the user is typing */
@@ -413,6 +415,7 @@ AutoComplete.defaultProps = {
   id: '',
   name: '',
   label: '',
+  value: '',
   helperText: '',
   error: '',
   disabled: false,

Diff for: components/AutoComplete/AutoComplete.unit.test.jsx

@@ -198,4 +198,11 @@ describe('AutoComplete', () => {
       screen.getByRole('option', { name: 'melancia' }),
     ).toBeInTheDocument();
   });
+
+  it('Should have a value when prop value is set', () => {
+    const initialValue = 'initial value';
+    render(<AutoComplete value={initialValue} suggestions={[]} />);
+    const autoCompleteInput = screen.getByRole('combobox');
+    expect(autoCompleteInput).toHaveAttribute('value', initialValue);
+  });
 });

Diff for: components/AutoComplete/index.d.ts

@@ -9,6 +9,7 @@ export interface AutoCompleteProps {
   id?: string;
   name?: string;
   label?: string;
+  value?: string;
   helperText?: string;
   error?: string;
   disabled?: boolean;