title: How to Send message by just clickiing on the suggestion in Botframework-Webchat?
body: <p>I want my bot to send the message when i click on the desired suggestion. i.e. i want the message to be sent - when i click on the suggestion or by selecting the suggestion using arrow keys and then pressing enter . But as of now, if i click or select the suggestion using arrow keys - the suggestion value comes to the text box and then i have to press enter to send the message. I just want to change that. 
  Any help would be greatly appreciated</p>
  
  <p>My code is as follows,</p>
  
  <pre><code>import React from 'react';
  import { DirectLine, ConnectionStatus } from 'botframework-directlinejs';
  import ReactWebChat from 'botframework-webchat';
  import './ChatComponent.css';
  
  var val;
  var apiParameters = [];
  var currentFocus = -1;
  export default class extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              token: '',
              conversationId: '',
              directLine: {},
              view: false,
              feedBack: null,
              value: '',
              popupContent: '',
              storeValue: '',
              suggestions: [],
              suggestionCallback: '',
              suggestionTypedText: "",
              typingChecking: "false",
  
          };
          this.handleTokenGeneration = this.handleTokenGeneration.bind(this);
          this.handleChange = this.handleChange.bind(this);
          this.handleSaveFeedback = this.handleSaveFeedback.bind(this);
          this.handleSuggestion = this.handleSuggestion.bind(this);
          this.handleClose = this.handleClose.bind(this);
          this.handleSuggestionClick = this.handleSuggestionClick.bind(this);
          this.handleKeyDown = this.handleKeyDown.bind(this);
  
          this.moveHighlight = this.moveHighlight.bind(this);
  
          this.getSuggestionHtml = this.getSuggestionHtml.bind(this);
      }
  
  
      getSuggestionHtml(suggestion) {
          const lowerCaseSuggestion = suggestion.toLowerCase();
          return {
              __html: lowerCaseSuggestion.includes(this.state.suggestionTypedText) ? lowerCaseSuggestion
                  .replace(this.state.suggestionTypedText, `&lt;b&gt;${this.state.suggestionTypedText}&lt;/b&gt;`) : lowerCaseSuggestion
          };
      }
      handleTokenGeneration = async () =&gt; {
          console.log("11111");
          const response = await fetch(`api/TokenGenerationService/GetToken`);
          const data = await response.json();
          this.setState({ token: data.categoryObject.token, conversationId: data.categoryObject.conversationId });
          this.state.directLine = new DirectLine({ token: this.state.token });
          this.setState({ view: true });
          this.setState({ typingChecking: "true" });
  
          console.log("conversationId");
      };
      async handleSuggestion(val, store) {
          if (val === "") {
              this.setState({
                  suggestions: []
              });
          }
          else {
              apiParameters = [];
              var valuess = null;
              const response = await fetch(`api/TokenGenerationService/GetAzureSearch?myparam1=${val}`);
              const data = await response.json();
              var values = ["Hello", "yes", "no", "exit", "Welcome", "Thank You", "Approve", "Apply leave", "Reject", "Absence Balance", "Leave Balance", "Upcoming Holidays", "Apply Comp-Off", "Approve Leave", "Raise Incident Tickets", "Project Allocation Info", "Reporting Manager Change", "Reporting Manager Approval", "Approve Isolve Tickets", "My Manager", "My Account Manager", "Generate Salary Certificate", "Isolve Ticket Status", "Internal Job Posting", "My Designation", "My Joining Date", "RM Approval", "RM Change", "Resource Allocation", "ESettlement Approval", "SO Approval", "Cash advance Approval", "Purchase Request Approval", "Referral status", "HR Ticket", "Platinum Support"];
              valuess = values.filter(s =&gt;
                  s.toLocaleLowerCase().startsWith(val.toLowerCase())
              );
              valuess = valuess.concat(data.az_search);
              this.setState({
                  suggestions: valuess,
                  suggestionCallback: store,
                  suggestionTypedText: val.toLowerCase()
              });
  
              var totCount = data.az_search;
              console.log("kkkkkk" + totCount);
  
              var myNode = document.getElementById('Suggestion1');
          }
      }
      getSuggestionCss(index) {
          var HIGHLIGHTED_CSS = "HIGHLIGHTED_CSS";
          var SUGGESTION_CSS = "SUGGESTION_CSS";
          console.log("jioouu" + this.state.highlightedIndex);
          return index === this.state.highlightedIndex ? HIGHLIGHTED_CSS : SUGGESTION_CSS;
      }
  
      moveHighlight(event, direction) {
          event.preventDefault();
  
          const { suggestions, highlightedIndex=-1 } = this.state;
          if (!suggestions.length) return;
          let newIndex = (highlightedIndex + direction + suggestions.length) % suggestions.length;
          console.log("lokkkk" + direction)
          if (newIndex !== highlightedIndex) {
              console.log("kkkkkkkkkkkkkkkkkkk")
              this.setState({
                  highlightedIndex: newIndex,
              });
          }
      }
      keyDownHandlers = {
  
          ArrowDown(event) {
  
              this.moveHighlight(event, 1);
          },
          ArrowUp(event) {
  
              this.moveHighlight(event, -1);
          },
          Enter(event) {
              const { suggestions } = this.state;
              if (!suggestions.length) {
                  // menu is closed so there is no selection to accept -&gt; do nothing
                  return
              }
              event.preventDefault()
              this.applySuggestion(suggestions[this.state.highlightedIndex]);
          },
      }
  
      handleKeyDown(event) 
          if (this.keyDownHandlers[event.key])
              this.keyDownHandlers[event.key].call(this, event)
      }
  
      async handleSuggestionClick(event) {
          await this.applySuggestion(event.currentTarget.textContent);
      }
  
      async applySuggestion(newValue) {
          await this.setState({ typingChecking: "false", suggestions: [], highlightedIndex: 0 });
          this.state.suggestionCallback.dispatch({
              type: 'WEB_CHAT/SET_SEND_BOX',
              payload: {
                  text: newValue,
              }
          });
          await this.setState({ typingChecking: "true" });
      }
  
      handleClose(elmnt) {
          var x = document.getElementsByClassName("autocomplete-items");
          for (var i = 0; i &lt; x.length; i++) {
              if (elmnt !== x[i]) {
                  x[i].parentNode.removeChild(x[i]);
              }
          }
  
      }
  
      async componentDidMount() {
  
          try {
              await this.handleTokenGeneration();
  
              const store =
                  window.WebChat.createStore(
                      {},
                      ({ getState }) =&gt; next =&gt; action =&gt; {
                          this.state.directLine.connectionStatus$
                              .subscribe(connectionStatus =&gt; {
  
                                  //console.log("connect" + connectionStatus);
                                  //console.log("LOP" + ConnectionStatus.ExpiredToken);
                                  if (connectionStatus === ConnectionStatus.ExpiredToken) {
                                      console.log("expired");
                                  }
  
                                  if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
                                      const val = action.payload.text;
                                      if (this.state.typingChecking === "true") {
                                          this.setState({
                                              highlightedIndex: -1,
                                          });
                                          console.log(this.state.typingChecking);
                                          this.handleSuggestion(val, store);
                                      }
                                  }
  
                                  if (action.type === 'DIRECT_LINE/DISCONNECT_FULFILLED') {
                                      console.log("final" + connectionStatus);
                                      console.log("finalexpired" + ConnectionStatus.ExpiredToken);
                                      console.log("final");
                                      this.handleTokenGeneration();
                                      // fetch('api/TokenGenerationService/GetToken').then(conversation =&gt; this.state.directLine.reconnect(conversation))
                                  }
                              });
  
                          return next(action)
                      }
                  );
  
              this.setState({ storeValue: store });
          } catch (error) {
              console.log("error in fetching token");
              console.log(error);
          }
          this.state.directLine.activity$
              .filter(activity =&gt; activity.type === 'message')
              .subscribe(function (activity)
              {
                  //console.log("oooooooooooooooooooooo");
              }
                 // message =&gt; console.log("received message ", message.text)
              );
      }
  
      handleSaveFeedback(ans) {
  
          var userID = "U92656";
          var feedbackmsg = this.state.value;
          var feedbacktype = this.state.feedBack;
          var convId = this.state.conversationId;
          fetch('api/Feedback/SaveFeedback',
              {
                  method: "POST",
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ Uid: userID, FeedbackMessage: feedbackmsg, Convid: convId, FeedbackType: feedbacktype })
              }).
              then(response =&gt; response.text())
              .then(data =&gt; {
  
                  console.log(data.getResult);
              });
  
          this.setState({ value: '' });
      }
      feedback(ans) {
          this.setState({ feedBack: ans });
  
          if (ans === "Send") {
              this.handleSaveFeedback(ans);
          }
          else if (ans === "Yes") {
              this.setState({ popupContent: "How was your experience?" });
              // console.log(this.state.value)
          }
          else if (ans === "No") {
              this.setState({ popupContent: "What went wrong?" });
              // console.log(this.state.value)
          }
      }
  
      handleChange = (event) =&gt; {
          this.setState({ value: event.target.value });
      }
  
      render() {
  
          if (!this.state.view) {
              return &lt;div /&gt;
          } else {
              const filteredSuggestions = this.state.suggestions.filter(
                  suggestion =&gt;
                      suggestion.toLowerCase().indexOf(this.state.suggestionTypedText.toLowerCase()) &gt; -1
              );
  
              return (
                  &lt;div className="react-container webchat" &gt;
                      &lt;div  onKeyDown={this.handleKeyDown.bind(this)}&gt;
                          &lt;div &gt;
  
                      &lt;ReactWebChat  directLine={this.state.directLine} webSocket={true} userID='U92656' username='Thomas' store={this.state.storeValue} sendTypingIndicator={true} /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className="SuggestionParent" id="Suggestion1"&gt;
  
                          {this.state.suggestions.map((suggestion, index)=&gt; (
                              &lt;div className={this.getSuggestionCss(index)} key={index}  onClick={this.handleSuggestionClick} &gt;
                                  {suggestion
                                      .toLowerCase()
                                      .startsWith(this.state.suggestionTypedText) ? (
                                          &lt;div&gt;
  
                                              &lt;b&gt;{this.state.suggestionTypedText}&lt;/b&gt;
                                              {suggestion
                                                  .toLowerCase()
                                                  .replace(this.state.suggestionTypedText, "")}
                                          &lt;/div&gt;
                                      ) : (
                                          &lt;div dangerouslySetInnerHTML={this.getSuggestionHtml(suggestion)} /&gt;
                                      )}
                              &lt;/div&gt;
                          ))}
                      &lt;/div&gt;
                      &lt;footer className="chat-footer" &gt;
                          &lt;div className="foot-footer"&gt;
                              Was I helpful ?
                              &lt;span className="feedback" onClick={() =&gt; this.feedback("Yes")} &gt;Yes&lt;/span&gt;&lt;span&gt;|&lt;/span&gt;&lt;span className="feedback" onClick={() =&gt; this.feedback("No")}&gt;No&lt;/span&gt;
                              {
                                  this.state.feedBack === "Yes" || this.state.feedBack === "No" ?
                                      (
                                          &lt;div className="dialog" id="myform"&gt;
                                              &lt;div id="textfeedback"&gt;
                                                  &lt;span id="closeFeedback" onClick={() =&gt; this.feedback("Close")}&gt;X&lt;/span&gt;
                                                  &lt;p&gt;{this.state.popupContent}&lt;/p&gt;
                                                  &lt;input type="text" id="feedbacktxtbox" required name="textfeedback" placeholder="Pleasure to hear from u!"
                                                      onChange={this.handleChange}
                                                      value={this.state.value} /&gt;
                                                  &lt;button type="button" id="btnfeedback" onClick={() =&gt; this.feedback("Send")}&gt;send&lt;/button&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      ) : null
                              }
                          &lt;/div&gt;
                      &lt;/footer&gt;
                  &lt;/div&gt;
              );
          }
      }
  }
  </code></pre>