Prevent open input/datapicker on clear input

1

Hello,

I’m trying to use the span clear to also delete the datapickers value and start a function below, I then put an addEventListener on the span to allow me to start the function, the problem is that the datapicker opens giving me problems, is there a possibility to prevent the opening of the datapicker when clicking on the span clear?

Simple example:

//HTML 

<div class="item-content item-input">
  <div class="item-inner">
    <div class="item-title item-label">Test</div>
    <div class="item-input-wrap">
      <input type="text" name="test" data-test required />
      <span class="input-clear-button" data-cleardata></span>
    </div>
  </div>
</div>

//JS

$f7.calendar.create({
  inputEl: '[data-test]',
  dateFormat: 'yyyy',
  disabled: {
    from: new Date()
  },
  on: {
    close: () => {
      myFunction();
    }
  }
});
document.querySelectorAll('span[data-cleardata]').forEach(el => {
  el.addEventListener('click', (e) => {
    myFunction();
  });
});
2

you can try this:

document.querySelectorAll('span[data-cleardata]').forEach(el => {
  el.addEventListener('click', (e) => {
    e.stopPropagation();
    e.stopImmediatePropagation();
    // manually clear input
    $f7.$(el).prev('input').val('').trigger('input change')
    myFunction();
  });
});
3

unfortunately the datapicker still opens despite the two non-propagation commands, for the clear input used setValue([]);
It seems that when you use the span clear you have to enter another value.