Topic: Table editor custom numeric input validation

RossK1 priority asked 9 months ago


Hello,

We have a a case where a table editor is implemented with very specific validation on the numeric inputs. The user needs real-time feedback as they enter values and the values they enter then need to be processed on the backend.

Expected behavior

Front end validation is performed and the input.value is updated or asserted to be acceptable. The row is confirmed and the value that was displayed in the input is displayed in the table.

Actual behavior

The input value is updated or asserted and displays correctly while the row is being edited. When the row is confirmed, however, a different value is instead recorded and displayed. This value appears to be what would have been entered if the input.value had not been edited. Curiously, if more than one edit is made to the value in the input, it seems to update partially.

For example, in the code snippet here, we implement a trivial validation for demonstration that the number entered must always be 42. When a row is first edited and the number changed, it indeed shows 42. But when the row is confirmed, a different number is recorded in the table.

For example, if I edit the first row (with the number 30) and backspace once in the numeric input, 42 is displayed, but confirming shows 3. If I edit the row again, 3 is shown, if I add say 5 onto it, I again see 42, but confirming gives 35. Now very curiously, if I again select this row I will see 35 but backspacing twice does not give an empty string, it shows 42 but confirming results in 4. It is as though the edit cached the initial value, the first change modified it but subsequent changes modified the displayed value.

This is all very counter-intuitive and the input.value should be what is recorded when a row is confirmed.

Please advise on possible workarounds until this can be resolved or an alternative way of enforcing complex validation in such numeric input fields.

Thanks!

Resources (screenshots, code snippets etc.)

Code snippet


Grzegorz Bujański staff answered 9 months ago


Unfortunately, our component is constructed in such a way that it does not allow validation in this way. The only way is to listen to the edit.mdb.tableEditor event and if the validation fails, call e.preventDefault() which will block the saving of the data and, for example, display an alert with information on what conditions must be met for the validation to pass.

I cannot guarantee that such a change will be made. However, we will discuss the possibility of changing this with the team.

We are also working on a more advanced version of the data table and table editor, and it is possible that this feature will be available there



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes