Wijmo Date Input fires valueChange event on load

Wijmo Date Input fires valueChange event on load

Posted by: MichaelT on 27 October 2018, 8:56 am EST

• 

  MichaelT

  • Post Options:
  • Link
    Copy

  Posted 27 October 2018, 8:56 am EST

  Question: How can I set the value of the date to NULL and NOT cause the (valueChange()) event to fire? i.e. I don’t want that event to fire when the page just loads… only when the user interacts with it.

  Environment:

  • Ionic v2
  • Angular

  1. I’ve added a Wijmo date input component to the HTML of a page
  2. I bound a component variable to the [value] = “endDate”
  3. I set the component’s [isRequired] = “false”
  4. I bound an event handler to the event (valueChanged) = “handleChange()”
  5. I set the initial value of “endDate” to null
  6. I load data and the data sets the “endDate” to null still

  Expected Results:

  • (valueChanged) should run once
  • date inside component is empty

  Actual Results:

  • (valueChanged) runs twice
  • date inside component is empty

  Notes:

  • Since the initial value is null and the loadData() sets the value to null again I would not expect the (valueChange()) event to fire
• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 5:16 am EST

  Hi,

  We are unable to replicate the issue at our end. Could you please have a look at the following sample and let us know what we are missing to replicate the issue: https://stackblitz.com/edit/ionic-watga8?file=pages%2Fwijmo-input%2Fwijmo-input.component.ts

  Also, the sample uses the latest release version 5.20182.524, please let us know the Wijmo build version you are using so that we may test it on the same version.

  ~Sharad

• 

  MichaelT

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 8:55 am EST

  I saw the issue replicated in that URL you provided.

  1. Click the stacklitz url
  2. Let the sample app load
  3. Right-click on the preview portion of the page and open the dev tools (in Chrome)
  4. Clear the console logs
  5. Refresh the preview window
  6. See the console logs and note: “chng fired”

  Expected results:
  
  No “chng fired” in console logs when the page refreshes… only when the user sets the date.

  Actual results
  
  “chng fired” is in the console logs on load AND when user sets the date.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 October 2018, 2:25 am EST

  Hi Michael,
  
  The valueChanged event gets triggered whenever the value gets changed. Hence during Control initialization, value change which causes the valueChanged event trigger.

  You may avoid this by setting a flag during page load and check in the event if the flag is true or not.
  
  Please refer to the following code snippet and the sample:
  
  https://stackblitz.com/edit/ionic-unb9vm?file=pages/wijmo-input/wijmo-input.component.ts

  
  private _isPageLoad=true;
  handleChange(date){
      if(this._isPageLoad){
        this._isPageLoad=false;
        return;
      }
      this.dateVal = date.value;
      console.log('chng fired');
    }
  

  Hope it clears!

  ~Manish