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).
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,
I could successfully implement my version on your button ;-)
I faced a problem regarding the disabled property. It works well on instanciated buttons, but, when listening to click event on the wrapper, you still get the event, even if the button is disabled.
I tried to preventDefault/stopPropagation the click event from the Host but it didn't work.
Finally I did this :
Hey Benoît,
Thanks for you letting me know about this. I haven't faced this issue before/yet. Do you have an example with the problem? I quickly put together a StackBlitz with my interpretation of your description and I'm not seeing the problem.
If you see the button-overview-example.html file, on line 4 I have added the disabled property and a click listener. Right now the disabled property is true. If you click it, nothing is printed to the console. However, if you change it to false, clicking on the button will print a message to the console. Is my solution similar to yours? If not, what is different? :)
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,
Thank you for your reply and the StackBlitz example ;-)
When I click on your disabled button, I see the console.log() in the console. See my screenshot. That's strange if you don't have this behaviour.
Image upload doesn't seem to work...
Hi Benoît,
You're right! There's something strange going on. I'm testing it in Firefox and it works fine. No console log on disabled button. In Edge and Chrome however it doesn't work and can see the console log when the button is disabled but not when it's enabled. Which is even more strange :D
Will have to dig deeper :)
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,
I should have tell you with which browser I tested ;-) But yes, that's very strange you have a different behaviour with Firefox on such a basic case...
As we listen to the click on host element, it seems logic to me that the event is still emitted even if a child button is disabled. The workaround I found, not ideal, is to use pointer-eventsnone or auto depending on disabled value. I tried to work with HostListener to preventDefault on click, which seems more clean to me, but it didn't work...
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,
I think a better way should to emit a custom event from the Button Host when user click on a real button. We won't have a kind of fake click event but a buttonClick event, emitted from the button. Getting this buttonClick could also remove confusion with the real click event.
I will follow this idea this week and let you know.
I'm also thinking about the way I will use a link tag, which can have a taste of button thanks to Angular Material, but is a link.
I tried to recreate an isolated StackBlitz with the issue. Yes, Firefox doesn't emit the click event, whereas Chrome/Edge do (haven't tested in other browsers). I think your suggestion makes sense. Even though I'd have preferred to only use the click listener. Let me know about your findings when you try it :)
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).
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.
Hi Dzhavat,
Thanks a lot for this example ! It will help a lot, hopefully not only me :-)
Have a nice day !
Hi Dzhavat,
I could successfully implement my version on your button ;-)
I faced a problem regarding the disabled property. It works well on instanciated buttons, but, when listening to click event on the wrapper, you still get the event, even if the button is disabled.
I tried to preventDefault/stopPropagation the click event from the Host but it didn't work.
Finally I did this :
I don't know if you faced that problem yet :-)
Hey Benoît,
Thanks for you letting me know about this. I haven't faced this issue before/yet. Do you have an example with the problem? I quickly put together a StackBlitz with my interpretation of your description and I'm not seeing the problem.
If you see the
button-overview-example.html
file, on line 4 I have added thedisabled
property and aclick
listener. Right now thedisabled
property istrue
. If you click it, nothing is printed to the console. However, if you change it tofalse
, clicking on the button will print a message to the console. Is my solution similar to yours? If not, what is different? :)Hi Dzhavat,
Thank you for your reply and the StackBlitz example ;-)
When I click on your disabled button, I see the console.log() in the console. See my screenshot. That's strange if you don't have this behaviour.
Image upload doesn't seem to work...
Hi Benoît,
You're right! There's something strange going on. I'm testing it in Firefox and it works fine. No console log on disabled button. In Edge and Chrome however it doesn't work and can see the console log when the button is disabled but not when it's enabled. Which is even more strange :D
Will have to dig deeper :)
Hi Dzhavat,
I should have tell you with which browser I tested ;-) But yes, that's very strange you have a different behaviour with Firefox on such a basic case...
As we listen to the click on host element, it seems logic to me that the event is still emitted even if a child button is disabled. The workaround I found, not ideal, is to use
pointer-events
none
orauto
depending on disabled value. I tried to work with HostListener to preventDefault on click, which seems more clean to me, but it didn't work...Hi Dzhavat,
I think a better way should to emit a custom event from the Button Host when user click on a real button. We won't have a kind of fake
click
event but abuttonClick
event, emitted from the button. Getting thisbuttonClick
could also remove confusion with the realclick
event.I will follow this idea this week and let you know.
I'm also thinking about the way I will use
a
link tag, which can have a taste ofbutton
thanks to Angular Material, but is a link.I tried to recreate an isolated StackBlitz with the issue. Yes, Firefox doesn't emit the click event, whereas Chrome/Edge do (haven't tested in other browsers). I think your suggestion makes sense. Even though I'd have preferred to only use the
click
listener. Let me know about your findings when you try it :)Hi Dzhavat,
I tested on Safari and the click event is emitted too, like Chrome/Edge.
Let's keep in touch about that !
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 :)