Fluentui: SearchBox does not search if search text empty

[Ridlsan]

I have this problem: user types smth, then press enter and request is sending. Then he wants to clear using keyboard and then press enter again to see results without filter. But my function is not called, because this code checks value for emptiness:

case KeyCodes.enter:
if (this.props.onSearch && this.state.value!.length > 0) {
this.props.onSearch(this.state.value);
}
break;

Remove this check for zero string or add some property to SearchBox

[micahgodbolt]

looking into proper solution. removing this check might have unintented consequences as 'value' was always assumed to be length > 0. Other option would be to put this behind a flag, so && this.state.value!.length || this.props.searchOnEmpty.

[cslecours]

On the top of my head, I see these two options :

1. Calling this.props.onClear in case KeyCodes.enter if length == 0
   Since clearing the textbox by pressing the X or by clearing the text seems like they should behave the same.

2. Falling back to user defined onKeyPress instead of onSearch if length == 0.
   Currently it's not possible to pass the onKeyPress prop to override the enter behavior because it will never be called on KeyCodes.enter press.

[aditima]

@micahgodbolt - do you want to take this up?
Maybe we should not block the search if the value changes from non-empty to empty?

[micahgodbolt]

There's nothing about the interface that guarantees a length to the onSearch 'newValue' string. So i'm going to go ahead and remove that length check and just return an empty string if enter is pressed without text being typed, or clear being pressed.

[martin-braun]

Has this been released, already? I initialised a new spfx webpart two weeks ago and it seems the search box still does not trigger the onSearch event when I press enter with an empty textbox.

my sp dependencies are

    "@microsoft/sp-core-library": "1.7.1",
    "@microsoft/sp-lodash-subset": "1.7.1",
    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
    "@microsoft/sp-webpart-base": "1.7.1",

[cslecours]

@MartyMaro

The fix is in the latest version (6). spfx is using version 5.120-ish.

See : https://github.com/OfficeDev/office-ui-fabric-react/blob/5.0/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx#L201

You could install the latest version of office-ui-fabric-react, but I'm not sure how well it will be supported : https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-integration#office-ui-fabric-react .

[martin-braun]

@cslecours Thank you for informing me. We prefer stability, so I bypassed the issue, by also taking actions on the blur event when the text field is empty. It feels inconsistent, but it's fine for now.

Is there any roadmap where I can see when fabric is updated in spfx?