After setting value of Combobox the value isn't changed immediately, even with dataBind()

Question

Through JavaScript I am trying to set the value of a Combobox and then submit a form. However, if I try to submit the form right after changing the value of the Combobox isn't set.

Above after I set the value of the Combobox and then submit the form the Combobox value isn't updated yet.
However if I set a timeout to wait 1 second before submitting the form the value is update by then. Below works but is a terrible solution.

How do I either wait until the Combox value is update or force an immediate update before I submit the form?

UdhayaKumar Duraisamy · Answer

Hi Eric,We are currently validating your requirement and we will update you within two business days (12 April 2022).Regards, Udhaya Kumar D

UdhayaKumar Duraisamy · Answer

Hi Eric,Thank you for your patience,In the ComboBox component on our end once the value of Combobox
changes the “ Change event “  will get triggered.
So, We suggest you call the submit function ( Ex : SubmitIncidentCreateForm() )
inside the change event. We also attached the code snippet and sample
below for your reference.

define(["require", "exports", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-inputs"], function (require, exports, ej2_dropdowns_1, ej2_inputs_1) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
      var comboBoxObject = new ej2_dropdowns_1.ComboBox({
          dataSource: sportsData,
          placeholder: "Select a game",
      });
   
      comboBoxObject.appendTo('#comboelement');
      function Submit() {
          comboBoxObject.change = function () {
              console.log("Triggered");
              SubmitIncidentCreateForm();
          };
      }
   
      function SubmitIncidentCreateForm() {

Regards,Udhaya
Kumar DAttachment: Sample_1e5ba6d8.zip

Eric Petersen · Answer

function Submit() {
     
  app.IncidentPerson_IncidentNumber.change = function () {
       
      console.log("Triggered");
       
      SubmitIncidentPersonCreateForm();
      };
  }

When doing this the change function never triggers. I assume this is because
you want me to put in inside a event listener to be trigger when the page
loads. However, I don't want to submit the form anytime the user changes the
combobox. I want to only submit this form on a special case AND when
another form is summited.​ When this happens I want to change the value of
this combobox, which is inside another form, and submit that form.

That said, even if I move the change function inside and before the change of
the value it still doesn't submit.

}).executeQuery(query).then(
          function
  (value) {
              app.IncidentPerson_IncidentNumber.change
  = function () {
                  console.log("Triggered");
                  SubmitIncidentPersonCreateForm();
              };
   
              app.SelectedIncidentId.value
  = value.result[0].IncidentId;
              app.IncidentPerson_IncidentNumber.value
  = value.result[0].IncidentId;
          },
          function
  (error) { toastError('Fetching Created Person', error); }
      );

With this, the change on IncidentPerson_IncidentNumber still never triggers. Is
this because binding the change function takes time to bind and isn't bound
before the value is changed?

UdhayaKumar Duraisamy · Answer

Hi Eric,We are currently validating your requirement and we will
update further details in two business days (18th April 2022).Regards,Udhaya Kumar D

UdhayaKumar Duraisamy · Answer

Hi
Eric,We
have recreated a sample based on the shared screenshot. In the sample of
ComboBox component after DataBind, the value of ComboBox changed immediately.
Please find the code snippet and sample below for reference.

define(["require", "exports", "@syncfusion/ej2-dropdowns"], function (require, exports, ej2_dropdowns_1) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
      var comboBoxObject = new ej2_dropdowns_1.ComboBox({
          dataSource: sportsData,
          placeholder: "Select a game",
      });
      comboBoxObject.appendTo('#comboelement');
      function Submit() {
          var Result = sportsData[0];
          comboBoxObject.value = Result;
          comboBoxObject.dataBind();
          console.log('DataBinded');
          SubmitIncidentCreateForm();
      }
      function SubmitIncidentCreateForm() {
          var incidentPersonCreateForm = document.getElementById("IncidentPersonCreateForm");
     
      var formData = new FormData(incidentPersonCreateForm);
     
      console.log(formData.getAll("user"));
      }
      document.getElementById('button').addEventListener('click', function (e) {
          Submit();
      });
  });

Kindly check the attached sample and modify the attached sample to replicate
the issue. This will help us to validate and provide a prompt solution.Regards,Udhaya
Kumar DAttachment: quickstart_9132fa13.zip