Dropdown does not close on external target click

[wnvko]

Add a dropdown to the page and a button external to the dropdown. Add a method to toggle the dropdown on button click, like this:

<IgbButton @ref="button" @onclick="@(e => Toggle())">DD</IgbButton>

<IgbDropdown @ref=dropdown Open="false">
    <IgbDropdownItem>Elemnt4e 1</IgbDropdownItem>
    <IgbDropdownItem>Elemnt4e 2</IgbDropdownItem>
    <IgbDropdownItem>Elemnt4e 3</IgbDropdownItem>
    <IgbDropdownItem>Elemnt4e 4</IgbDropdownItem>
</IgbDropdown>

@code {
    private IgbButton button;
    private IgbDropdown dropdown;

    public void Toggle()
    {
        this.dropdown.Toggle(this.button);
    }
}

When you click on the button it opens the dropdown. With dropdown opened when you click on the button nothing happens.

Dropdown should close on button click.

Note: it seams like dropdown's Open property does not update and is always returns false Note2: I am testing this in latest dev nugget package 21.2.983-dev

[mddifilippo89]

Don't pass this.button in the toggle method. It's redundant when the Button is outside the dropdown. If the button is inside the dropdown (which is supposed to be normal behavior for setting up the dropdown). then you don't even have to hook the click event and toggle the dropdown as it will do that for you naturally.

@using IgniteUI.Blazor.Controls @inject IIgniteUIBlazor IgniteUIBlazor

Target Dropdown Option 1 Option 2 Option 3

@code {

IgbDropdown DropDownRef { get; set; }
IgbButton Button1 { get; set; }

protected override void OnInitialized()
{
    IgbDropdownModule.Register(IgniteUIBlazor);
    IgbDropdownItemModule.Register(IgniteUIBlazor);
    IgbButtonModule.Register(IgniteUIBlazor);
}

private void OnClick(MouseEventArgs e)
{
    //this.DropDownRef.Toggle();
}

}

[mddifilippo89]

Also, slot="target" is necessary on the IgbButton when wiring up to the dropdown otherwise it won't work at all when placed inside the drop down.

[mddifilippo89]

However if you set KeepOpenOnOutsideClick to true then toggling works correctly for buttons that are outside. Perhaps this should be enabled to true by default.

[wnvko]

I cannot put the button in the dropdown. What I need is navigation bar and drop down to a button in it like this:

<IgbNavbar class="navbar" master-view-scope>
    <div slot="start">
        <IgbButton @ref="button" Variant="ButtonVariant.Flat" @onclick="@(e => Dropdown?.Toggle(button))">
            <span class="Material">
                menu
            </span>
            <IgbRipple></IgbRipple>
        </IgbButton>
    </div>
    <div class="navbar-content">Screen Title</div>
</IgbNavbar>
<IgbDropdown @ref="Dropdown" class="dropdown" master-view-scope>
    <IgbDropdownItem>
        Option
    </IgbDropdownItem>
    <IgbDropdownItem>
        Option
    </IgbDropdownItem>
    <IgbDropdownItem>
        Option
    </IgbDropdownItem>
</IgbDropdown>

I just simplified the example above. I cannot put the dropdown in the navigation bar as it will no show at all. Also cannot set KeepOpenOnOutsideClick.

[IvayloG]

Not only cannot set KeepOpenOnOutsideClick, but it behaves as if its default value in Blazor is true, although in WC it is false.

    keepOpenOnOutsideClick: {
      type: 'boolean',
      description:
        'Whether the component should be kept open on clicking outside of it.',
      control: 'boolean',
      defaultValue: false,
    },

[wnvko]

To clarify - KeepOpenOnOutsideClick has nothing to do with the issue! What we've found is on button click we are calling toggle method but internally Blazor dropdown calls always show method - it should call toggle!

[mddifilippo89]

@wnvko fyi, You can put a button in the Dropdown, you just have to set it's slot="target". @IvayloG Passing button in the Toggle method allows for the the options to appear under the menu and in addition to the dropdown (if it contains a button) and prevents toggling as pointed out. KeepOpenOnOutsideClick to true seems to work half the time for external components but not for the navbar menu Button as shown below.

@IvayloG is this clear and expected?

To @wnvko point, if you set KeepOpenOnOutsideClick to true it doesn't help in this certain scenario. It would appear the dropdown wasn't designed to be positioned under external elements and could just be a limitation. You should try putting the navbar and button etc within the Dropdown. that might the ideal solution.

@using IgniteUI.Blazor.Controls @inject IIgniteUIBlazor IgniteUIBlazor <IgbButton style="margin-right: 20px;" @onclick=OnClick>Toggle Dropdown

menu

Screen Title

Dropdown Option 1 Option 2 Option 3

@code {

IgbDropdown DropDownRef { get; set; }
IgbButton ButtonRef { get; set; }
IgbButton button { get; set; }
protected override void OnInitialized()
{
    IgbDropdownModule.Register(IgniteUIBlazor);
    IgbDropdownItemModule.Register(IgniteUIBlazor);
    IgbButtonModule.Register(IgniteUIBlazor);
    IgbNavbarModule.Register(IgniteUIBlazor);
}

private void OnClick(MouseEventArgs e)
{
    this.DropDownRef.Toggle();
}

}

[wnvko]

@mddifilippo89 please if there is an issue with KeepOpenOnOutsideClick open other task for it. The issue I am facing is related only to the toggle of the dropdown. Here are all the limitations for this scenario:

• I do need to have button (dropdown target) outside of the dropdown. I know I can put the button in dropdown and put it in a slot=target. However, I need the button to be outside of the dorpdown.
• By specification when the target, in my case the button, is not in the dropdown when calling toggle or open methods you should provide an object. Provided object should be used as a target. This is why I am providing the button to the toggle method.
• Finally calling toggle should open the dorpdown, if it was closed, positioned next to the provided target. Calling toggle should close the dropdown if it was open.

Again this should work no matter how KeepOpenOnOutsideClick is set!

Attached is a sample showing this issue. Dropdown Issue.zip

Note: the sample uses package form latest dev build.

Open the sample and:

• click on the left button. This will show the drop down correctly attached to the button. Click again the button. Drop down does not close - this is the issue.
• Refresh the sample. Click on the right button. This will show the dropdown placed somewhere on the screen. Dropdown has no target and this is not what I need. Click again the right button. Dropdown closes. This is expected behavior. Note: if you perform the second step without refreshing the sample dropdown will open next to the left button and on second click will not close!

[IvayloG]

@mddifilippo89 I have tested KeepOpenOnOutsideClick with the above sample. In the context of an outside to the dropdown button:

-It seems the KeepOpenOnOutsideClick works as expected for the main scenario when passing a toggle target object. The option is respected when set. -Where KeepOpenOnOutsideClick seems not to work as expected, is when using Toggle() without passing the target. In this case the *KeepOpenOnOutsideClick option is still set correctly to the component (when inspecting the generated dropdown), however as a behavior, it does not close on the outside click.

Having the above in mind, and maybe expecting nobody to use toggle() without a target obj, it does not seem like a pressing issue but a one to have in mind.

[mddifilippo89]

@IvayloG Please review the Dropdown Issue.zip in the previous post. The external Button (left) with target should be able to toggle hide the options with repeating clicks.

[mddifilippo89]

@IvayloG

If the Dropdown is to behave like Angular or not there needs to be a cleaner way for the end user to know the button is wired up in that manner without having to fire a click event or the documentation needs to be made clear what scenarios are supported for displaying the dropdown content.

In Angular the IgxButton has an IgxToggleAction=dropdown, igxDropDownItemNavigation=dropdown with no way, thats advertised, to embed itself within the dropdown.

eg. https://www.infragistics.com/angularsite/components/drop-down