Botframework-webchat: Sending questions with trailing spaces using enter fails to trim(). - fix included

[jimmyjames177414]

Screenshots

Network call sending trailing spaces:

webchat.js needs .trim() added to the following:

webchat-es5.js needs .trim() added to the following:

Version

This issue can be found on the following CDN's as of 8/16/2019:
https://cdn.botframework.com/botframework-webchat/master/webchat.js
https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js

https://cdn.botframework.com/botframework-webchat/latest/webchat.js
https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js

Describe the bug

When sending text with trailing spaces, such as "what is AI ", and then clicking enter to submit, the trailing spaces are not stripped and the network call sends the trailing white spaces as shown above.

To Reproduce

Steps to reproduce the behaviour:

1. Go to the textbox and type 'Jim is cool '
2. Press Enter key
3. Check network call and see that what is sent is the string 'Jim is cool '

Expected behaviour

When submitting a question using the enter key, the question should be stripped of trailing white spaces (the same way the click to submit works).

Additional context

I have attached the two scripts with the fix:
space fix.zip

As a special request, could you send a text to (219) 310- 5041 when this bug is fixed? This is a high priority fix for our product.

[Bug]

[tdurnford]

@jimmyjames177414 Can you test with the latest CDN? Master uses Web Chat v4.3.1 and is no longer updated.

https://cdn.botframework.com/botframework-webchat/latest/webchat.js
https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js

[jimmyjames177414]

@tdurnford I just tested both CDN's you suggested and both have the issue.

Adding .trim() to the return of sendBoxValue (e.sendBoxValue) still fixes the issue as well.

[corinagum]

@jimmyjames177414 Thanks for reporting this issue! If you are able, it would be amazing if you could file an issue with the fix in our repository, and we will prioritize verifying your changes to merge in.
I am adding this issue to our Triage and we will get the fix added into our code. I think the .js files you have provided are a good workaround to users in the meantime.

This fix will likely be available in our next release in late October. If you need these changes immediately (once the fix is in), please see our documentation on pointing to our MyGet feed for latest bits.

[jimmyjames177414]

Sounds great! Consider it done.

I believe the change needs to be made here:

file: BotFramework-WebChat/packages/component/src/SendBox/TextBox.js
Line 43 needs to be added to the red if condition.

[tdurnford]

Would it be better to fix this in submitSendBoxSaga?

function* submitSendBox() {
  yield takeEvery(SUBMIT_SEND_BOX, function*({ payload: { method } }) {
    const sendBoxValue = yield select(sendBoxValueSelector);

    if (sendBoxValue) {
      yield put(sendMessage(sendBoxValue.trim(), method));
      yield put(setSendBox(''));
    }
  });
}

@compulim @corinagum

[jimmyjames177414]

Sounds good!

[tdurnford]

If we are trimming the sendBoxValue in the submitSendBoxSaga, we should consider removing setSendBox(sendBoxValue.trim()) from the SendButton and TextBox components - seems redundant. This would also allow us to simplify the SendButton's click prop to just submitSendBox.