Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign uppointer-events styles breaks title prop and cursor styles on disabled buttons #276
Comments
This comment has been minimized.
This comment has been minimized.
Fixed by #615 |
- See e.g. jgthms/bulma#276
- See e.g. jgthms/bulma#276
This comment has been minimized.
This comment has been minimized.
@jgthms: However, you have changed examples to use the attribute on anchors. This seems to be invalid (anyone, please correct me if I'm wrong). I am under the impression that in order to style anchors as "disabled", the re-introduction of a corresponding CSS class is necessary. |
This comment has been minimized.
This comment has been minimized.
The issue I raised technically only applied to form controls (buttons and inputs), I'm not quite sure why that change was also done for anchor tags. @homeworkprod But even if a CSS class (or something like |
This comment has been minimized.
This comment has been minimized.
Is this getting reverted back specifically on the tags? disabled doesn't appear to be considered as a valid attribute for anchors. It does appear that if disabled gets hard coded to an anchor directly when defining that, yes the element seems to show in a "disabled" state but subsequently it isn't able to be programmatically enabled / disabled beyond its original definition which means you are stuck with having to specifically define 2 separate anchors (specifically one enabled and one disabled) and then perform some type of show/hide toggle between them which is very sub-optimal. Or is there something I'm missing? |
This comment has been minimized.
This comment has been minimized.
Yes this is still an issue in regard to anchors. |
This comment has been minimized.
This comment has been minimized.
Still issue (with anchors) in 2018. If anyone comes here, check the status at #885 |
This comment has been minimized.
This comment has been minimized.
This is a two edged sword. By not relying on a class, you cannot click things inside the disabled element. For example we have an input box that is disabled, but when clicking the little lock which is INSIDE the input box, we want to enable it. Cannot do that if disabled is a property of the input box, as the browser blocks onclick events. |
Checklist
Description
The
pointer-events: none
styles being used on.is-disabled
or.button[disabled]
selectors breaks any title/alt properties applied to button tags, and also prevents thecursor: not-allowed
style from being applied to the button..is-disabled
on=control
: sass/utilities/controls.sass:30.is-disabled
on%control-with-element
: sass/elements/form.sass:53, sass/elements/form.sass:55.is-disabled
: sass/base/helpers.sass:98.is-loading
usespointer-events: none
as a hack to disable buttons: sass/elements/button.sass:106I think it's a dangerous precedent to rely on
pointer-events
to control browser behaviour for disabling form controls. Thedisabled
property is the more accurate and reliable way to disable a control. I can see how using this CSS style could make it easier to disable multiple elements at once by applying theis-disabled
class and cascade it down to child elements, but that behaviour could be replicated with a disabledfieldset
.As noted on the MDN article about
pointer-events
:So without a dedicated
disabled
property, buttons and controls could still potentially be interacted with by non-mouse events such as keyboard input, or browser plugins (e.g. autofill or spellcheck plugins)Steps to Reproduce
Expected behavior: When hovered over, the browser toggles the
not-allowed
cursor and shows the title text in a tooltip.Actual behavior: Both the tooltip and cursor style are not activated.