Open wnvko opened 2 years ago
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
@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();
}
}
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.
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.
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
.
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,
},
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
!
@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
@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();
}
}
@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:
slot=target
. However, I need the button to be outside of the dorpdown.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.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:
@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.
@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.
@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
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:
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