Unable to click the arrow icon to close combobox when dropdown appears

[adamint]

🐛 Bug Report

💻 Repro or Code Sample

This is present in the combobox examples: https://www.fluentui-blazor.net/Combobox (first discovered in the Aspire filter dialog).

🤔 Expected Behavior

Clicking the arrow button after the combobox is dropped down will close the dropdown.

😯 Current Behavior

Clicking the arrow does nothing. However, clicking outside the combobox will close it. Please see the videos here

🌍 Your Environment

Fluent UI Blazor 4.5, Chromium

[vnbaaij]

By coincidence an issue for this was opened for this just the other day in the fluent repo. There is also already a PR open to fix it in the FAST repo.
I'll ask what the schedule is to get it merged and then pullen into the web components script.

[adamint]

Oh that’s funny 😄 thanks, Vincent!

[joriverm]

ah ye, i noticed this too but saw it was in the webcomponents itself so i didn't report it here 😄

[chrisdholt]

Coming soon - dependent PR for the stable release of Fluent: microsoft/fast#6942

[joriverm]

@chrisdholt : its been nearly 2 months. are there any updates on the webcomponents update?

[hml-coder]

@vnbaaij @dvoituron Would you accept a PR similar to what's below for this issue since microsoft/fluentui/issues/30693 had a soft close in Sept. 2024?

The fluent-combobox template is using the onclick event so this PR (workaround) could register a click event on the dropdown indicator of that template and use a small delay to let the 'fluent-combobox' do it's thing before attempting to close the list.

FluentCombobox.razor.cs

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
     await base.OnAfterRenderAsync(firstRender);

     if (firstRender)
     {
         if (!string.IsNullOrEmpty(Id))
         {
             Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
             await Module.InvokeVoidAsync("setControlAttribute", Id, "autocomplete", "off");
              
             await Module.InvokeVoidAsync("attachIndicatorClickHandler", Id);
             Debug.WriteLine($"combo: {Id}");
         }
     }
 }

FluentCombobox.razor.js

const handlers = new Map();

export function setControlAttribute(id, attrName, value) {
    const fieldElement = document.querySelector("#" + id)?.shadowRoot?.querySelector(".selected-value");

    if (!!fieldElement) {
        fieldElement?.setAttribute(attrName, value);
    }
}

export function attachIndicatorClickHandler(id) {
    const combobox = document.querySelector("#" + id);
    if (!combobox) return;

    const indicator = combobox.shadowRoot?.querySelector('[part="indicator"]');
    if (!indicator) return;

    // Use click with a 100ms delay
    indicator.addEventListener('click', (event) => {
        if (combobox.hasAttribute('open')) {
            setTimeout(() => {
                combobox.removeAttribute('open');
                console.log("Combo closed after delay");
            }, 100);
        }
    });

    // Store the handler for cleanup
    handlers.set(id, { combobox, indicator });
}

export function detachIndicatorClickHandler(id) {
    const handler = handlers.get(id);
    if (handler) {
        const { indicator } = handler;
        indicator.removeEventListener('click', handler.mouseup);
        handlers.delete(id);
        console.log(`Handler detached for combobox with id ${id}`);
    }
}

[dvoituron]

This could be a solution, but I don't like the fact that you have to remove the open attribute and use a timer?
Deleting a component element is always a risk with regard to its internal operation.
Using a timer to activate or engage an event can cause problems on other environments (WASM, browsers, MAUI).

In my opinion, this could be used, but only by adding an AllowClickOnClose attribute (or something like that).

[hml-coder]

Ahhh...we need to be careful about altering the DOM. I posted a possible fix in the fluentui project microsoft/fluentui#30693 if you want to have a look. In the meantime I'll handle the workaround in my local projects.

[vnbaaij]

I don't think there will be a new version of the web components v2 anytime soon.

As @dvoituron said, we can do it on our side but we just need to make it 'opt-in'

[hml-coder]

Thanks. I'm just now getting familiar the versioning of web technologies and how this all works. I'll do a PR if you think others would want this option.

AllowClickOnClose
AllowCloseWithClick

Any other suggestions?

[vnbaaij]

EnableClickToClose?

[hml-coder]

Looking to get your thoughts on this approach.

Updated the JavaScript to dispatch an Escape key KeyboardEvent directly to the fluent-combobox, without using timers or altering the DOM structure.

const handlers = new Map();

export function attachIndicatorClickHandler(id) {
    const combobox = document.querySelector("#" + id);
    if (!combobox) return;

    const indicator = combobox.shadowRoot?.querySelector('[part="indicator"]');
    if (!indicator) return;

    // Click handler to simulate ESCAPE key press if combobox is open
    const clickHandler = (event) => {
        if (combobox.hasAttribute('open')) {
            event.preventDefault();
            event.stopImmediatePropagation();

            const escEvent = new KeyboardEvent('keydown', {
                key: 'Escape',
                code: 'Escape',
                keyCode: 27,
                bubbles: true,
                cancelable: true
            });

            combobox.dispatchEvent(escEvent);
        }
    };

    indicator.addEventListener('click', clickHandler);
    handlers.set(id, { indicator, clickHandler });
}

export function detachIndicatorClickHandler(id) {
    const handler = handlers.get(id);
    if (handler) {
        const { indicator, clickHandler } = handler;
        indicator.removeEventListener('click', clickHandler);
        handlers.delete(id);
    }
}

[dvoituron]

That sounds better to me

[hml-coder]

Fixed in FluentCombobox with #3186