Trash Icon - To remove input field value

HI Team , I am working on a Application that have an input page with some input fields , Some input fields are auto-filled from the service returning the data .  I have a requirement where I have to provide a ‘trash’ icon next to all input fields which are auto-filled by service . If in case user want’s to fill some other data in those fields , he can simply click on trash icon and the auto-filled input should be removed . Can some one help me how can i achieve this ? Do we have some widget for the same ?    
1 answers

My advice to your PO or stakeholder would be to not do this since the user is already able to overwrite the value just by double clicking on the text field. The trash-icon will only take up extra space, create alignment issues, be different to normal Mendix-apps and you will have to prevent unwanted behavior.

Having said that, there is no widget yet doing this yet. To get this done:

  • place a container around the input field,
  • place the trashcan-button next to input field inside the container
  • make the trashcan-button trigger a nanoflow that calls a javascript,
  • have that javascript select the previous sibling
let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;

and set the value of prevSibling to null.

If you feel upto it: create a widget yourself doing just this.