elm / html

Use HTML in Elm!
https://package.elm-lang.org/packages/elm/html/latest/
BSD 3-Clause "New" or "Revised" License
394 stars 99 forks source link

Add a way to preventDefault without producing a message #137

Open avh4 opened 7 years ago

avh4 commented 7 years ago

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).

process-bot commented 7 years ago

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.

jinjor commented 7 years ago

@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?

ivanbanov commented 7 years ago

@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

micahhahn commented 1 year ago

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.