diff --git a/assets/js/app.js b/assets/js/app.js index 92a5c1b940..b32ebd033c 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -444,6 +444,9 @@ class App { }); }); + document.querySelectorAll('[data-ea-value-of-comparison-id]').forEach((firstValue) => { + firstValue.dataset.eaOriginalInputType = firstValue.type; + }); document.querySelectorAll('[data-ea-comparison-id]').forEach((comparisonWidget) => { comparisonWidget.addEventListener('change', (event) => { const comparisonWidget = event.currentTarget; @@ -452,14 +455,21 @@ class App { if (comparisonId === undefined) { return; } - const secondValue = document.querySelector(`[data-ea-value2-of-comparison-id="${comparisonId}"]`); + const firstValue = document.querySelector(`[data-ea-value-of-comparison-id="${comparisonId}"]`); - if (secondValue === null) { - return; + if (secondValue !== null) { + toggleVisibilityClasses(secondValue, comparisonWidget.value !== 'between'); + } + if (firstValue !== null && firstValue.dataset.eaOriginalInputType === 'number') { + if (comparisonWidget.value === 'in') { + firstValue.type = 'text'; + firstValue.placeholder = 'xxx; yyy; zzz'; + } else { + firstValue.type = 'number'; + firstValue.placeholder = ''; + } } - - toggleVisibilityClasses(secondValue, comparisonWidget.value !== 'between'); }); }); } diff --git a/doc/filters.rst b/doc/filters.rst index dbf05333be..ccabdc5b29 100644 --- a/doc/filters.rst +++ b/doc/filters.rst @@ -75,7 +75,8 @@ These are the built-in filters provided by EasyAdmin: It's rendered as two radio buttons for the null and not null options. * ``NumericFilter``: applied by default to numeric fields. It's rendered as a ```` to define the comparison value. + ```` to define the comparison value. When using the ``IN`` comparator, the value + input becomes a text field where you can enter a semicolon-separated list of numbers. * ``TextFilter``: applied by default to string/text fields. It's rendered as a ```` or ``