Disable itemValidator's "autocorrect" for the InputDate Class

Disable itemValidator's "autocorrect" for the InputDate Class

Posted by: bmiller on 19 March 2024, 6:19 am EST

• 

  bmiller

  • Post Options:
  • Link
    Copy

  Posted 19 March 2024, 6:19 am EST

  Is there a way to prevent the itemValidator from automatically reverting an invalid date when manually entering one into an InputDate field?

  For us, this could be error prone as users might enter/paste in dates and move onto the next thing before realizing that their date was not accepting. If we could prevent the autocorrection, but instead mark the field as invalid, then we could flag the field as needing correction.

  I think the autocorrection should be an optional feature, if it’s not already available, or maybe it could be added.

  If that’s not on the horizon or optional at this point, is there a hook or an event that goes off when the date is autocorrected? That would be a nice fallback if the autocorrection cannot be disabled. Thanks!

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 20 March 2024, 12:09 am EST

  Hi,

  To prevent the itemValidator from auto-correcting, you can override a private function called _getText(), which is responsible for auto-correcting the text. However, after overriding this function, you may encounter another issue where the selected value from the calendar is not reflected in the input field. To address this, you should handle the valueChanged event and manually assign the value to the text field.

  
    theInputDate._getText = () => {
      return theInputDate.text;
    };
    theInputDate.valueChanged.addHandler((s, e) => {
      s.text = wijmo.Globalize.format(s.value);
    });
  

  
  
  We can handle the **textChanged **event on the inputDate to indicate an invalid date. By doing so, we can check if the input date is valid or not and then execute our custom logic to notify the user that the field contains invalid data.

   theInputDate.textChanged.addHandler((s, e) => {
      const date = wijmo.Globalize.parseDate(s.text, 'd');
      if (!date || !s._isValidDate(date)) {
        wijmo.addClass(theInputDate.inputElement, 'incorrectDate');
        theInputDate.invalidate(true);
      } else {
        wijmo.removeClass(theInputDate.inputElement, 'incorrectDate');
        theInputDate.invalidate(true);
      }
    });

  You can refer to this sample link for implementation: https://stackblitz.com/edit/js-ce5rzo?file=index.js

  Best Regards

• 

  bmiller

  • Post Options:
  • Link
    Copy

  Posted 20 March 2024, 11:29 pm EST

  Thank you, that helps things.

  Is there an event you can expose for whenever the input autocorrects something?

• 

  bmiller

  • Post Options:
  • Link
    Copy

  Posted 25 March 2024, 12:32 am EST

  The solution where we override the

  _getText

  method is producing issues; mainly with event triggering and ordering.

  Can you provide an event where the “autocorrection” gets triggered? As you mentioned and as the name hints to, “_getText” is not an equivalent to an autocorrect event, so we can not assume that every time “_getText” is called, an autocorrection has occurred.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 26 March 2024, 4:51 pm EST

  Hello

  Sorry for the inconvenience caused. There is an event called invalidInput which triggers an invalid input format. You can use this also, but it will not get triggered on dates that are in the correct format but still invalid because of the min/max range or itemValidator provided.

  So to remove the need to override _getText(), we can use invalidInput, textChanged, focus & commit accordingly. Please refer to the updated sample below and verify if it fulfills your requirements.

  Sample: https://stackblitz.com/edit/js-hlfi7a?file=index.js

  Feel free to ask for any further assistance.

  Regards

• 

  bmiller

  • Post Options:
  • Link
    Copy

  Posted 9 April 2024, 6:45 am EST - Updated 9 April 2024, 7:36 am EST

  Does overriding “_commitText()” work the same with the Angular implementation? This does not seem to prevent the autocorrection…

  @ViewChild('calendar', {
      static: true,
  }) calendar!: WjInputDate;`
  
  this.calendar['_commitText'] = (event: any): void => {
      if (incorrectInput) return;
      WjInputDate.prototype['_commitText'].call(this, event);
  };
  

  There also might be some issues from your given stackblitz solution…

  • Changing to an invalid date, and then trying to click the “today” icon (the bullet icon between the arrows) doesn’t respond all the time.
  • If you change the text to an invalid date and click away from the field, the value is the previous valid date, not the current text.

  Additionally, is there a private function that only fires when an autocorrection is made?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 10 April 2024, 3:38 am EST

  Hello,

  1. The solution is working perfectly in Angular also. I Apologize but I am unable to exactly replicate your issue, a sample from your side would be helpful. Though looking at your snippet, the cause might be the arrow function that you are using for overriding _commitText. As in the overridden function, we are aiming to call the base function with InputDate context, so please use the regular function here instead of the arrow function to correctly bind this. You can refer to this sample in Angular: https://stackblitz.com/edit/angular-hfuivs?file=src%2Fapp%2Fapp.component.ts

  2. I can see the issue in my previous sample. After entering an invalid date, and then trying to click the “today” icon, the display is not changing. This issue is fixed in the latest version of Wijmo. The version of my previous sample was 5.20221.842, please update to the latest version (5.20241.9) to fix it.
     
     refer to this updated sample: https://stackblitz.com/edit/js-wdt6xt?file=index.js

  3. On entering an invalid text the InputDate.value property will always show the last valid date and it should not be modified to any invalid input. This property is to store the correct committed value. If you want to get the displayed text you can use InputDate.text property.

  4. There is no separate private function that only runs in case of autocorrection. The input passes through validations and if it is invalid, the onInvalidInput() is called. But the autocorrection happens while formatting the input and the formatting happens on valid inputs also.

  I hope the above points answered your issues, otherwise, feel free to ask for any further assistance.

  Regards