angledown icon in react-bootstrap-typeahead

Question

Using typeahead inside formik and having tough time to add the fa-angle-up and fa-angle-down icons for react-bootstrap-typeahead as below image

instead i have problem like below(it should look like above image)

code: https://codesandbox.io/s/formik-example-forked-8m6o6

Answer 1

Can you please check the below code link? Hope it will work for you. We have added one element custom-dropdown and put FontAwesomeIcon and Typeahead element inside this.

In .custom-dropdown we set position: relative; and

In .fa-angle-down we set position: absolute; and also set its position as per your requirement.

Please refer to this link: https://codesandbox.io/s/formik-example-forked-uupel

Answer 2

Here you go.

React imports:

import { TiArrowSortedDown } from 'react-icons/ti';

React return statement:

   <>          
    <div className={styles.typeaheadStyles}>
    <Typeahead
        className={...}
        onChange={(event)=>handleChange(event)}
        onInputChange={(event)=>handleInputChange(event)}
        key={...}
        id={...}
        options={optionsArray}
        flip
        defaultSelected={defaultArray}
    />
   <TiArrowSortedDown className={styles.arrowDown} />
   </div>      
   </>

CSS:

.typeaheadStyles{
    align-items: center;
    padding: 12px 16px;
    background-color: "gray";
    display: flex;
    justify-content: end;

}