iommirocks / iommi

Your first pick for a django power cord
http://iommi.rocks
BSD 3-Clause "New" or "Revised" License
784 stars 51 forks source link

Action.button creates a button element without type="button" #417

Open berycz opened 1 year ago

berycz commented 1 year ago

from discord:

Bery Hi, I've just noticed that Action.button creates a button element without type="button", is that by design, or a bug?

boxed By design. Type=button is for input, not button.

Bery huh? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type

type The default behavior of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a

, or if the attribute is an empty or invalid value. reset: The button resets all the controls to their initial values, like . (This behavior tends to annoy users.) button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

thus inside form.actions, an Action.button acts like submit

boxed yea well, Action.button should have a post_handler and then you need the type to be submit, which is the default

Bery but isnt that exactly what Action.submit does then? πŸ™‚

boxed that's true

Bery I wanted it for opening a panel (drawer), but I'm thinking I'm gonna use link anyway (so ppl can open it in a new tab) but still I'm kinda missing the difference between submit and button, if both do submit and both have post handler

also I can't imagine how do you call the right post_handler if button does not have attrs__name=lambda action, **_: action.own_target_marker() πŸ€”

boxed oh, thought it did

Bery so I suppose there is a bug πŸ™‚ but really, I'd let Action.button be attrs__type="button" and Action.submit be attrs__type="submit" from the point of backward compatibility, I dont think it would break anything, since the post_handler isnt probably called?

boxed or maybe you could consider Action.button as a shortcut that is sort of an abstract thing attrs__type=None I think. Cleaner.

Bery could be, I guess... then if you want a button type=button, you have to specify attrs__type="button" tho... and you have to put it in the docs, because people might not expect it

boxed on the other hand you do get a <button> which could be what you expect. It's weird that <button> in html is NOT <button type="button"> Depends on your perspective, if you come from the html side or the python side what you expect probably

Bery btw as an "abstract" I would kinda expect Action._button + having Action.button for type=button as I understand it, it is type=button if it is outside of form πŸ™‚ I'm gonna copy-paste this whole convo to an issue, it's up to you what you make of it πŸ™‚ it's not as hard to specify attrs__type="button", but then it would be better to note in the docs

berycz commented 8 months ago

I found another problem with not having type attribute in button: In JS you cannot use selector button[type="button"], you need to select all buttons and then check .type (at least in FF)

    // this doesn't return them:
    // form.querySelectorAll('input[type="submit"], button[type="submit"]').forEach(function(btn) {
    // you need to do this:
    form.querySelectorAll("input[type=submit], button").forEach(function(btn) {
        if(btn.type !== "submit") {
            return;
        }
        // btn.addEventListener("click", function() {...});
    });

same problem with css

#my_form button {border: 1px solid red}
#my_form button[type="submit"] {border: 1px solid blue}

they get red border, if you don't set type