fix(forms): allow autocomplete customization based on css selectors

Author: assisrafael

src/forms/FormAutocomplete.jsx

@@ -109,7 +109,7 @@ export function FormAutocomplete({
         {...{ placeholder, disabled }}
         type="text"
         ref={searchInputRef}
-        className={`form-control ${isFocused ? '' : 'd-none'} ${controlFeedback}`}
+        className={formatClasses(['form-control form-autocomplete-search', isFocused ? '' : 'd-none', controlFeedback])}
         onChange={handleInputChange.bind(null, {
           update: onSearchInputType,
         })}
@@ -124,7 +124,7 @@ export function FormAutocomplete({
 
       {!isFocused && (
         <div
-          className={formatClasses(['form-control', controlFeedback])}
+          className={formatClasses(['form-control form-autocomplete-selected', controlFeedback])}
           disabled={disabled}
           onClick={enableSearchInput}
         >
@@ -141,6 +141,7 @@ export function FormAutocomplete({
         ref={registerRef}
       />
       <Dropdown
+        className="form-autocomplete-dropdown"
         isOpen={isOpen()}
         items={items.filter(filter(searchValue))}
         onSelect={onSelectItem}

src/mixed/Dropdown.jsx

@@ -3,9 +3,22 @@ import PropTypes from 'prop-types';
 import { safeClick } from '../utils/event-handlers';
 import { formatClasses } from '../utils/attributes';
 
-export function Dropdown({ children, items, onSelect, isOpen, onTouchStart, onMouseEnter, onMouseLeave, template }) {
+export function Dropdown({
+  children,
+  items,
+  onSelect,
+  isOpen,
+  onTouchStart,
+  onMouseEnter,
+  onMouseLeave,
+  template,
+  className,
+}) {
   return (
-    <div className={formatClasses(['dropdown', isOpen && 'show'])} {...{ onTouchStart, onMouseEnter, onMouseLeave }}>
+    <div
+      className={formatClasses(['dropdown', className, isOpen && 'show'])}
+      {...{ onTouchStart, onMouseEnter, onMouseLeave }}
+    >
       {children}
 
       {items.length > 0 && (
@@ -44,4 +57,5 @@ Dropdown.propTypes = {
   onSelect: PropTypes.func,
   onTouchStart: PropTypes.func,
   template: PropTypes.func,
+  className: PropTypes.string,
 };