Deprecation: #89215 - jQuery.clearable

See Issue #89215

Description

The jQuery plugin jquery.clearable that provides a button to clear an input field has been marked as deprecated.

Impact

Using jquery.clearable will trigger a deprecation warning in the browser’s console.

Affected Installations

All 3rd party extensions using jquery.clearable are affected.

Migration

Import the module TYPO3/CMS/Backend/Input/Clearable and use the method clearable() on a native HTMLInputElement.

Example code:

 require(['TYPO3/CMS/Backend/Input/Clearable'], function() {
   const inputField = document.querySelector('#some-input');
   if (inputField !== null) {
     inputField.clearable();
   }

   const clearables = Array.from(document.querySelectorAll('.t3js-clearable')).filter(inputElement => {
     // Filter input fields being a date time picker and a color picker
     return !inputElement.classList.contains('t3js-datetimepicker') && !inputElement.classList.contains('t3js-color-picker');
   });
   clearables.forEach(clearableField => clearableField.clearable());
});

The method also accepts an options object, allowing to set a onClear callback. The callback receives the input field as an argument the clearing was applied to.

Example code:

const inputField = document.querySelector('#some-input');
if (inputField !== null) {
  inputField.clearable({
    onClear: function (input) {
      input.closest('form').submit();
    }
  });
}