How to keep FluentUI SearchBox keep Icon as fixed?

Question

I am using SearchBox in my application. On click of searchbox the icon is hidden. I am looking for way to have it always. Can't find relevant property in IconProps which I can leverage

import React, { useRef } from 'react';
import { SearchBox } from '@fluentui/react/lib/SearchBox';
import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';

const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
const searchBoxRef = useRef();

/* eslint-disable react/jsx-no-bind */
export const SearchBoxFullSizeExample = () => {
  return (
    <Stack tokens={stackTokens}>
      <SearchBox placeholder="Search" onSearch={newValue => console.log('value is ' + newValue)} />
      <SearchBox
        placeholder="Search with no animation"
        onSearch={newValue => console.log('value is ' + newValue)}
        disableAnimation
       iconProps={{ iconName: 'Search', hidden: false, styles: { root: { display: 'block' }, componentRef:{searchBoxRef}  }  }}
     onClick={ () => searchBoxRef.hidden = false }
      />
    </Stack>
  );
};

https://learn.microsoft.com/en-us/javascript/api/examples/searchbox?view=office-ui-fabric-react-latest

score 1 · Answer 1 · answered Jul 23 '21 at 13:42

As the GitHub issue was resolved, new property is available on SearchBox. Now you can set showIcon and icon will be visible all the time.

<SearchBox placeholder="Search" onSearch={newValue => console.log('value is ' + newValue)} showIcon />

Reference:
https://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox#implementation

score 0 · Answer 2 · answered Mar 05 '21 at 12:29

I found the solution to have the Search Icon as clickable. Currently there is open issue at Fluent-UI's end where Search Icon goes away on click on Inputbox and there is no handle to keep it static. Only way is to override CSS which is changed internally when SearchBox is active on click. Then we can leverage SearchIcon's onclick event as below

import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import React, { useState, useRef, useEffect } from 'react';

export function SearchBoxWrapper(props) {

<SearchBox
    id={`SearchBox`}
    maxLength="15"
    styles={{ root: { width: 230 } }}
    placeholder="Search by Product number"
    onSearch={newValue => props.searchProduct(productNumber)}
    onChange={(_, newValue) => setProductNumber(newValue)}
    iconProps={{ iconName: 'Search', style: { opacity: 100,  color: 'white', cursor: 'pointer' }, onClick: () => props.searchProduct(productNumber) }}
    disableAnimation
  />
  
    const [productNumber, setProductNumber] = useState('');
    
    
function mapDispatchToProps(dispatch) {
     return {
        searchProduct: productNumber => {
          dispatch(searchProduct(productNumber));
        }
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

export default compose(withConnect)(SearchBoxWrapper);

https://github.com/microsoft/fluentui/issues/8782

SearchBox CSS that hides the Search Icon on click https://github.com/OfficeDev/office-ui-fabric-js/blob/master/src/components/SearchBox/SearchBox.scss

How to keep FluentUI SearchBox keep Icon as fixed?

2 Answers2