diff --git a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js index ef02ab29562..3b7e8557f35 100644 --- a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js +++ b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js @@ -33,12 +33,16 @@ export function init(id, invoke) { }) } - EventHandler.on(input, 'blur', e => { + ac.triggerBlur = () => { el.classList.remove('show'); const triggerBlur = input.getAttribute('data-bb-blur') === 'true'; if (triggerBlur) { invoke.invokeMethodAsync('TriggerBlur'); } + } + + EventHandler.on(menu, 'click', '.dropdown-item', e => { + ac.triggerBlur(); }); EventHandler.on(input, 'focus', e => { @@ -81,7 +85,11 @@ export function init(id, invoke) { const el = a.querySelector('[data-bs-toggle="bb.dropdown"]'); if (el === null) { - a.classList.remove('show'); + const id = a.getAttribute('id'); + const d = Data.get(id); + if (d) { + d.triggerBlur(); + } } }); } @@ -99,7 +107,7 @@ const handlerKeyup = (ac, e) => { const current = menu.querySelector('.active'); if (current !== null) { current.click(); - input.blur(); + ac.triggerBlur(); } invoke.invokeMethodAsync('EnterCallback', input.value); } @@ -108,7 +116,7 @@ const handlerKeyup = (ac, e) => { const skipEsc = el.getAttribute('data-bb-skip-esc') === 'true'; if (skipEsc === false) { invoke.invokeMethodAsync('EscCallback'); - input.blur(); + ac.triggerBlur(); } } else if (key === 'ArrowUp' || key === 'ArrowDown') { @@ -149,7 +157,7 @@ export function dispose(id) { Data.remove(id) if (ac) { - const { popover, input } = ac; + const { popover, input, menu } = ac; if (popover) { Popover.dispose(popover) if (input) { @@ -158,14 +166,14 @@ export function dispose(id) { } EventHandler.off(input, 'change'); EventHandler.off(input, 'keyup'); - EventHandler.off(input, 'blur'); + EventHandler.off(menu, 'click'); Input.dispose(input); - } - const { AutoComplete } = window.BootstrapBlazor; - AutoComplete.dispose(id, () => { - EventHandler.off(document, 'click', ac.closePopover); - }); + const { AutoComplete } = window.BootstrapBlazor; + AutoComplete.dispose(id, () => { + EventHandler.off(document, 'click', ac.closePopover); + }); + } } const scrollIntoView = (el, item) => {