support disabled and readonly attributes with @ syntax? about reef HOT 5 CLOSED

I think that's a really good idea!

from reef.

@Roguelazer I was thinking about this more, and... I'm realizing the reason I didn't support functionality like that with these attributes to start with is that they can't really be modified by user interactions like selected, checked, etc. can be.

Can you tell me a bit more about the use case here?

from reef.

I think I was disabling fields while an HTTP request runs

from reef.

@Roguelazer I think this should work out-of-the-box...

return `<button ${data.disabled ? 'disabled' : ''}>Submit</button>`

That said, I'd actually recommend you NOT do this, as disabling buttons that have focus shifts focus to the document and creates confusing accessibility issues for screen reader users.

I suggest adding a class that changes the color/opacity of elements without disabling them, and simply ignoring additional submits until the HTTP request is completed, like this...

function template () {
    return `
        <form>
            <!-- form field stuff -->
            <button ${data.submitting ? 'class="disabled"' : ''}>Submit</button>
            <div role="status">${data.submitting ? 'Submitting...' : ''}</div>
        </form>`;
}

let data = store({
    submitting: false
});

document.addEventListener('submit', function (event) {

    // Don't let the form reload the page
    event.preventDefault();

   // If the form is already being submitted, ignore request
   if (data.submitting) return;
   
   // Add data-submitting attribute
   data.submitting = true;
   
   // Do your HTTP stuff...
   
   // Then, reenable the form
   data.submitting = false;

});

.disabled {
    opacity: 0.7;
}

from reef.

Sorry, I'm closing this as unnecessary given that there's an alternate approach. The boolean hack for checked etc. exists primarily as a quick for how user-defined variables work in the DOM.

from reef.