html
html copied to clipboard
Add a way to preventDefault without producing a message
Opening re: https://github.com/elm-lang/html/issues/96#issuecomment-315233884
The suggestion in #96 is to use a NoOp message. This is annoying but otherwise okay if you are directly doing this in your program's view function, however it becomes tedious when you have a large codebase with reusable UI modules. In our case, we have a styled checkbox module which needs to stop propagation of clicks on the checkbox and the label that it creates. Since we must produce a message to be able to stop propagation, we have:
type alias Checkbox.Config msg =
{ label : String
, isChecked : Bool
, onCheck : Bool -> msg
, noOp : msg
}
We also have other reusable view modules that contain checkboxes, and all of their configs must also have a noOp parameter. We then must also add a NoOp message to every program that uses any of these views (this is the last remaining reason we need a NoOp message for almost all of our programs).
Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!
Here is what to expect next, and if anyone wants to comment, keep these things in mind.
@avh4 I ran into the same problem once before.
In our case, we have a styled checkbox module which needs to stop propagation of clicks on the checkbox and the label that it creates.
Can you share the particular reason why it needed to stop propagation without producing any message?
@avh4 @jinjor I've been with the same problem. In my case it's happening with a modal
------------------
| overlay |
| ----------- |
| | container | |
| ----------- |
------------------
The correct behavior: when clicking on the overlay the modal should close.
Ok, but if I click on the container it will close the modal as well, so I have to set the options with stopPropagation = True
, for that I have to send the NoOp Msg in every place where the modal is called
Can you share the particular reason why it needed to stop propagation without producing any message?
The recommended way to make disabled inputs accessible is to set aria-disabled="True"
and handle the disabling yourself - which means using preventDefault
. Obviously we do not want a msg
in this case, as we're explicitly trying to not let a user take action on this element.