terra-search-field onChange not triggered when the value is set programmatically

[FloraChenCerner]

Bug Report

Description

When we were testing dictation (Nuance dictation) in one of our search field, after the character is added to the field by the dictation, the auto search is not triggered. Clicking on the search button doesn't work either. We believe what happened was terra-search-field onChange/onSearch not triggered when the value is set programmatically.

Steps to Reproduce

Set the value of the search input programmatically and observe the auto search is not triggered.
Click on the search button and observe the search is not triggered

Additional Context / Screenshots

Expected Behavior

We expect onChange/onSearch to be triggered when the search value is set programmatically, which means the auto search and clicking on the search button should trigger the search.

Possible Solution

Environment

• Component Name and Version: terra-search-field 3
• Browser Name and Version: iOS WKWebview (shouldn't matter what browser is used)
• Node/npm Version: [e.g. Node 8/npm 5] Node 8.7
• Webpack Version: 4
• Operating System and version (desktop or mobile): iOS 13 (shouldn't matter what system is used)

@ Mentions

@dkasper-was-taken

[lokesh-0813]

@FloraChenCerner The input used in terra-search-field is a wrapper around native <input> element. It is the default functionality of the native element to not fire onChange event on adding text programmatically.
Here is an example for the native behaviour.

When we were testing dictation in one of our search field, after the character is added to the field by the dictation, the auto search is not triggered

For the dictation issue(if you are talking about the macOs dictation accessibility), it seems to work fine. Let me know if i am wrong here.

@StephenEsser handleSearch in terra-search-field is only called on click of search icon or on onChange event for input. Any inputs on this?

[FloraChenCerner]

When saying dictation, I refer to the Nuance dictation which is a third party dictation tool we use to dictate medical terms. If the macOS dictation is triggering the auto search, is it because it's not programmatically adding text? If the onChange event can't be triggered in this case, can we have something else triggered to make auto search work? Even clicking the search button doesn't work for us.

[mjhenkes]

We need design input as to whether dictation should trigger auto search.

Clicking the search button should trigger a search and that is a minor bug.
@lokesh-0813 You could take a look at this portion.

[lokesh-0813]

@mjhenkes Adding text programmatically and clicking search icon does trigger a search.

[lokesh-0813]

@FloraChenCerner Could you point to your project github or provide a reduced case for the issue ??

[FloraChenCerner]

@lokesh-0813 It's really hard to setup the project or provide a reduced case since we are using third party dictation api, and it need to be running in the iOS simulator.
Here is the html: https://gist.github.cerner.com/FC029464/d2ad7952638482d983bf75873084137a
You can see the editable content has 'Medication' which is added by dictation, but the auto search is not triggered and clicking on the search button doesn't trigger search either.

I noticed when you add the text programmatically, the 'x' button is shown, whereas in our case that button is not shown

[lokesh-0813]

@FloraChenCerner I tried with terra-search-field downgraded to version 3.0.0 and still was not able to reproduce the issue.

Does the search work with keyboard input ? Also could you try dictating via macOS dictation and check if the search call gets triggerred ?

If you could help me with how you have implemented search-field in your project, I can get a better idea of what's going on ?

Here is an example of what I tried.

Click to expand

function App() {
  const [value, setValue] = useState('');

  const handleButtonClick = () => {
    setValue('sample text');
  }

  const handleOnSearch = (value) => {
    console.log('search value', value)
  }

  const handleOnChange = (event)=> {
    setValue(event.target.value);
  }
  
  return (
    <Base locale="en">
      <div>
        <button type="button" onClick={handleButtonClick}>Click me</button>
        <SearchField placeholder="search" value = {value} onSearch={handleOnSearch} onChange={handleOnChange} />
      </div>
    </Base>
  );
}

[FloraChenCerner]

@lokesh-0813 The search does work with keyboard input and we implemented search field just like you did. I'm trying to figure out if the issue is with dictation itself. I will let you know when dictation team make progress

[nramamurth]

Flora, I think that the easiest way to find out if dictation is causing the behavior is to not initialize dictation for the search field on your page and give this workflow a try.

[FloraChenCerner]

Talked to the dictation team and we found the root cause is we are supposed to listen to an event they fire when text is dictated and added to the field. However even we listen to their event, the callback method they use to trigger the event didn't get called. Dictation team is going to add terra inputs in their test app to see whether and why the terra component is preventing that method being called.

[FloraChenCerner]

So we managed to listen to their event and perform the search in the event handler, and update the search field value with the event target value. However this means onChange is not getting called in the search field, which means this method won't get called, which means these lines will never get hit. Is it possible to hit those logic when we only change the value programmatically?

[lokesh-0813]

Is it possible to hit those logic when we only change the value programmatically?

@FloraChenCerner As I have mentioned earlier, onChange wont get fired when we set value programmatically.

The input used in terra-search-field is a wrapper around native element. It is the default functionality of the native element to not fire onChange event on adding text programmatically.
Here is an example for the native behaviour.

CC : @dkasper-was-taken @StephenEsser

[FloraChenCerner]

@lokesh-0813 I discussed with @dkasper-was-taken and @tbiethman, and I'm suggested to use onInput instead since it will be get fired when value is set programmatically. However terra form elements don't explicitly support it for now. If I use it instead of onChange some internal state won't get updated and so logics won't be hit, so they say the work will be planned and prioritized. Thank you.

[lokesh-0813]

@dkasper-was-taken and @tbiethman Should we consider doing something like this.

Here is something related.

[tbiethman]

@lokesh-0813 We shouldn't need to do that. If we update the search field to properly handle the onInput callback, I believe this issue will be resolved.