I got some suggestion for how to fix this on Twitter. Looks like using pointer-events: none when the button is disabled fixes the issue. Created a StackBlitz :)
Designing and building web apps since 1998.
Digital adventurer through Director, shockwave, Flash, Air, Angular.
Give life to Drupal contents in rich decoupled user experiences (SPA/PWA).
Hi Dzhavat,
Yes that's what I did but I think it's not ideal. I think it's more safe to listen to the real button target click event.
I tried another approach, creating the Component manually and listening directly to the button instance. Then emitting a btnClick event with the event coming from the real button. My button wrapper is pointer-events:none, always, and only the child button is pointer-event:auto.
Here is the template :
Designing and building web apps since 1998.
Digital adventurer through Director, shockwave, Flash, Air, Angular.
Give life to Drupal contents in rich decoupled user experiences (SPA/PWA).
Hi Dzhavat,
The way the component was created, with static providers, made the properties on the wrapper impossible to be bound on the final button component. Once the disabled property was set, it couldn't be updated.
I found a way to be able to update value from Wrapper to button instance.
I created a private validateDisabled function which update the button instance isDisables @Input (which is no more injected).
Calling ngOnChange on the dynamically created component seems to be the only way to force the update of the component's properties.
The ButtonTemplate now has more properties
Hey Benoît,
Thanks for sharing your solution. Appreciate it!
I haven't looked at it in details yet but will do that in the coming days and share my thoughts :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I got some suggestion for how to fix this on Twitter. Looks like using
pointer-events: none
when the button is disabled fixes the issue. Created a StackBlitz :)Hi Dzhavat,
Yes that's what I did but I think it's not ideal. I think it's more safe to listen to the real button target click event.
I tried another approach, creating the Component manually and listening directly to the button instance. Then emitting a
btnClick
event with the event coming from the real button. My button wrapper ispointer-events:none
, always, and only the child button ispointer-event:auto
.Here is the template :
Here is the buildComponent function :
My buttons implements the
ButtonTemplate
interfaceI'm going on on with it, I'll let you know if it's fine. I plan also to manage not only
<button>
but<a>
too, which may have the look of buttons.Hi Dzhavat,
The way the component was created, with static providers, made the properties on the wrapper impossible to be bound on the final button component. Once the disabled property was set, it couldn't be updated.
I found a way to be able to update value from Wrapper to button instance.
I created a private validateDisabled function which update the button instance isDisables @Input (which is no more injected).
Calling ngOnChange on the dynamically created component seems to be the only way to force the update of the component's properties.
The
ButtonTemplate
now has more propertiesFor example, here is the
AccentButtonComponent
Hey Benoît,
Thanks for sharing your solution. Appreciate it!
I haven't looked at it in details yet but will do that in the coming days and share my thoughts :)