wc-shellinput value does not change after programatically injecting new value

[ghost]

$(".wc-shellinput").prop({value: "Welcome"}) changes the display value of the text box but does not make changes in value of input class...

<input class="wc-shellinput" type="text" placeholder="Type your message..." value="" autocomplete="off">

[billba]

This is a React app, so it maintains DOM state internally and updates from there. Manipulating the DOM directly will have unexpected results. Don't do that.

[danmarshall]

Agree this is not a bug. But, it could be a feature request. @ramgesg can you provide a scenario where you would inject text on the user's behalf?

[ghost]

@dan, this is for injecting onselect value from autosuggest. Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10 From: Dan Marshall<mailto:[email protected]> Sent: Friday, September 8, 2017 11:23 PM To: Microsoft/BotFramework-WebChat<mailto:[email protected]> Cc: Ramakrishnan S<mailto:[email protected]>; Mention<mailto:[email protected]> Subject: Re: [Microsoft/BotFramework-WebChat] wc-shellinput value does not change after programatically injecting new value (#680) Agree this is not a bug. But, it could be a feature request. @ramgesg<https://github.com/ramgesg> can you provide a scenario where you would inject text on the user's behalf? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#680 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AZKM-4CKk51hW7WvGp0u4ogJRg_0wbSaks5sgX8WgaJpZM4PQhNT>.

[danmarshall]

Related to #476

[danmarshall]

We can continue this conversation in #476

[mrPrateek95]

Not a clean method but you can use this.

//Fill the input field : Using a Hack. This might break after the next React update
//Source: facebook/react#11488
var input = document.getElementsByClassName("wc-shellinput")[0];
var lastValue = input.value;
input.value = YOUR TEXT;
var event = new CustomEvent('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16
var tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);

$(".wc-send:first").click();

[Snekha-Shivakumar]

@mrPrateek95 Thank you for this. But, it works in chrome and firefox and not in IE. Any idea on this?

[mrPrateek95]

@Snekha-Shivakumar What version of IE are you using? I have tested it on IE11. Seems to be working there.

[Snekha-Shivakumar]

@mrPrateek95 Yeah I found the issue. new CustomEvent() is not working in IE. Just added a polyfill before the custom event and it works fine now. Here is the polyfill:

    (function () {
        function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
        };
        CustomEvent.prototype = window.Event.prototype;
        window.CustomEvent = CustomEvent;
    })();

Thank you.

[mrPrateek95]

@Snekha-Shivakumar Checked on my client. I have also added this polyfill. Slipped my mind earlier.

[gideon-harpanahalli]

Hey @mrPrateek95,
I am trying to autofill input field when user types a question partially clicks on a button to autocomplete the question. This solution seems to not work in this case. The text previously entered text is sent rather than the text which is added programatically. Any suggestions to resolve this?

    // Event listeners
    $(document).on("click focus", ".suggestion-box", function () {
        const selectedQuestion = $(this).text();
        const inputElement = $(".wc-shellinput")[0]; // Get the DOM element from the jQuery object
        inputElement.value = selectedQuestion; // Set the value directly to the DOM element

        // Create a new event 
        var event = new CustomEvent('input', { bubbles: true });
        event.simulated = true;
        var tracker = input._valueTracker;
        if (tracker) {
            tracker.setValue(selectedQuestion);
        }
        // Dispatch the event on the input element
        inputElement.dispatchEvent(inputEvent);
        $(".wc-send:first").click();
    });