fix(filter): keep typed text when closing the filter, drop it only on clear all

This commit is contained in:
Ritvik Sardana
2026-10-05 12:27:14 +05:30
parent a2d1c45cb4
commit e08dd865b8
3 changed files with 20 additions and 13 deletions

View File

@@ -5,10 +5,7 @@
<FilterTrigger
:count="activeFilters.length"
@toggle="resetSteps()"
@clear="
clearFilters();
popover?.close();
"
@clear="clearAllAndClose"
/>
</div>
</template>
@@ -131,6 +128,7 @@
<!-- Step: value — pick operator + value (renders its own header) -->
<FilterValueEditor
v-else-if="step === 'value' && selectedField"
ref="valueEditor"
:key="editSession"
:field="selectedField"
:filter="editingFilter"
@@ -191,6 +189,7 @@ const overviewHeader = ref<HTMLElement | null>(null);
// sits above the filter popover panel instead of behind it.
const operatorMenuLayer = ref<HTMLElement | null>(null);
const popover = ref<InstanceType<typeof Popover> | null>(null);
const valueEditor = ref<InstanceType<typeof FilterValueEditor> | null>(null);
// Row actions stay out of the way until the row is hovered or focused.
const revealOnRowActivity =
@@ -282,6 +281,12 @@ function applyFilter(operator: string, value: any) {
replacingIndex.value = null;
}
function clearAllAndClose() {
valueEditor.value?.discardPendingText();
clearFilters();
popover.value?.close();
}
function clearCurrentFilter() {
if (editingIndex.value === null) return;
removeFilter(editingIndex.value);

View File

@@ -466,6 +466,11 @@ function goBack() {
const debouncedTextApply = useDebounceFn(applyPendingText, 500);
// Called before clearing every filter, so closing the editor can't bring one back
function discardPendingText() {
textApplyPending = false;
}
function applyPendingText() {
if (!textApplyPending) return;
textApplyPending = false;
@@ -501,7 +506,7 @@ watch(activeIndex, (index) => {
watch(operator, (newOperator, oldOperator) => {
// typed text belongs to the old operator, so drop it instead of applying it late
textApplyPending = false;
discardPendingText();
search.value = "";
activeIndex.value = 0;
if (newOperator === "is") {
@@ -555,9 +560,7 @@ watch(operatorMenuOpen, (open) => {
if (!open) focusSearch();
});
// Closing the popover can mean every filter was just cleared, so a pending edit
// is dropped rather than applied back
onBeforeUnmount(() => (textApplyPending = false));
onBeforeUnmount(applyPendingText);
function cycleOperator(direction: number) {
const operatorList = operators.value;
@@ -604,4 +607,6 @@ useEventListener(document, "keydown", (event: KeyboardEvent) => {
goBack();
}
});
defineExpose({ discardPendingText });
</script>

View File

@@ -24,11 +24,8 @@ interface Context {
names: Record<Key, string>;
}
/**
* One row per field type and operator. Each case raises three tickets (a, b, c),
* sets them up over REST, applies the filter through the popover and checks
* which of the three tickets stay in the list.
*/
// One case per field type and operator: raise tickets a, b and c, set them up
// over REST, apply the filter in the popover and check which ones stay listed.
interface FilterCase {
field: string;
operator?: string;