getting typeahead to work correctly with styling.

cfpb · Jun 4, 2024 · 99872cc · 99872cc
1 parent 872833a
commit 99872cc
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/src/components/Typeahead/Input/Input.js b/src/components/Typeahead/Input/Input.js
@@ -6,7 +6,7 @@ import { ClearButton } from '../ClearButton/ClearButton';
 
 export const Input = ({
   ariaLabel,
-  className,
+  // className,
   htmlId,
   isDisabled,
   handleChange,
@@ -17,35 +17,31 @@ export const Input = ({
   value,
 }) => {
   return (
-    <section className={`typeahead ${className | ''}`}>
-      <div className="m-btn-inside-input input-contains-label">
-        <div
-          className="input-contains-label__before
-                            input-contains-label__before--search"
-        >
+    <div className="o-search-input">
+      <div className="o-search-input__input">
+        <label aria-label={ariaLabel} htmlFor={htmlId}>
           {getIcon('search')}
-        </div>
-        <label className="u-visually-hidden" htmlFor={htmlId}>
-          {ariaLabel}
         </label>
+
         <input
-          type="text"
-          className="a-text-input"
+          type="search"
+          className="a-text-input a-text-input__full"
           disabled={isDisabled}
           id={htmlId}
           onChange={handleChange}
           onKeyDown={handlePressEnter}
           placeholder={placeholder}
           value={value}
+          maxLength={200}
         />
         {!!isClearVisible && <ClearButton onClear={handleClear} />}
       </div>
-    </section>
+    </div>
   );
 };
 Input.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  className: PropTypes.string,
+  // className: PropTypes.string,
   isDisabled: PropTypes.bool.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleClear: PropTypes.func,

diff --git a/src/components/Typeahead/Typeahead.less b/src/components/Typeahead/Typeahead.less
@@ -7,6 +7,7 @@
     }
   }
   &-selector {
+    width: 100%;
     position: relative;
 
     // z-index: 99;
@@ -91,8 +92,11 @@
     }
   }
 
-  .o-search-input__input-label {
-    z-index: 1;
+  .o-search-input__input {
+    //display: block;
+    &-label {
+      z-index: 1;
+    }
   }
 }
 

diff --git a/src/components/Typeahead/Typeahead/Typeahead.js b/src/components/Typeahead/Typeahead/Typeahead.js
@@ -1,36 +1,36 @@
 import '../Typeahead.less';
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Typeahead as DropdownTypeahead } from 'react-bootstrap-typeahead';
 import getIcon from '../../iconMap';
 import HighlightingOption from '../HighlightingOption/HighlightingOption';
-import { ClearButton } from '../ClearButton/ClearButton';
+// import { ClearButton } from '../ClearButton/ClearButton';
 
 export const Typeahead = ({
   ariaLabel,
-  className,
+  // className,
   htmlId,
   isDisabled,
   handleChange,
   handleInputChange,
-  hasClearButton,
+  // hasClearButton,
   maxResults,
   minLength,
   options,
   placeholder,
 }) => {
   const ref = useRef();
-  const [input, setInput] = useState('');
-  const isVisible = hasClearButton && input;
+  // const [input, setInput] = useState('');
+  // const isVisible = hasClearButton && input;
 
   const handleClear = () => {
     ref.current.clear();
-    setInput('');
+    // setInput('');
   };
 
   return (
-    <section className={`typeahead ${className | ''}`}>
-      <div className={'o-search-input ' + { className }}>
+    <section className="typeahead">
+      <div className="o-search-input">
         <div className="o-search-input__input">
           <label
             aria-label={ariaLabel}
@@ -51,7 +51,7 @@ export const Typeahead = ({
             }}
             onInputChange={(value) => {
               handleInputChange(value);
-              setInput(value);
+              // setInput(value);
             }}
             options={options}
             maxResults={maxResults}
@@ -62,15 +62,22 @@ export const Typeahead = ({
               </li>
             )}
           />
-          {!!isVisible && <ClearButton onClear={handleClear} />}
+          <button
+            type="reset"
+            onClick={handleClear}
+            aria-label="Clear search"
+            title="Clear search"
+          >
+            {getIcon('delete')}
+          </button>
         </div>
       </div>
     </section>
   );
 };
 Typeahead.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  className: PropTypes.string,
+  // className: PropTypes.string,
   isDisabled: PropTypes.bool.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleInputChange: PropTypes.func.isRequired,
@@ -83,7 +90,7 @@ Typeahead.propTypes = {
 };
 
 Typeahead.defaultProps = {
-  className: '',
+  // className: '',
   hasClearButton: false,
   isDisabled: false,
   maxResults: 5,