You can have a look at my reset all filters action in the marketplace:
https://marketplace.mendix.com/link/component/213250
It also broke when upgrading to mendix 10 but I've done some fixes. You can take a look at the javascript itself inside the action if you want to only reset 1 filter with your button. You will then have to adjust the code a little bit so that it only targets the input that you want to reset instead of all inputs.
Also your javascript's biggest flaw why resetting this way doesnt work properly is because you are only changing the DOM but you are not using any of the react props that the widget uses and thats why its not reflecting any changes correctly.
export async function EmptyTextContent(className) {
// BEGIN USER CODE
//className -> class name of Datagrid
// First we find all the datagrid 2 filters.
const filters = document.querySelectorAll('.' + className + ' .filter-container .form-control');
if (filters.length == 0) {
return Promise.resolve();
}
// Then we define the function that will reset a filter
async function resetFilter(filter) {
return new Promise(async (resolve) => {
const props = Object.keys(filter);
let react = null;
// Reset value
filter.value = '';
// Find the __reactProps property of the current filter
for (let i = 0; i < props.length; i++) {
if (props[i].includes('__reactProps')) {
react = props[i];
break;
}
}
// Trigger the react onchange event
if (react && filter[react].onChange) {
filter[react].onChange({ target: filter });
}
resolve(); // Resolve the promise to indicate completion
});
}
// Convert NodeList to an array using Array.from()
const filterArray = Array.from(filters);
const resetPromises = filterArray.map(async (filter) => {
await resetFilter(filter);
});
// Wait for all promises to complete before returning
await Promise.all(resetPromises);
return Promise.resolve();
// END USER CODE
}
Working solution from @Hunter Koppen post