required attribute not working in prompt modals

[rakuzen25]

Current Behavior

The required attribute on the text input element in prompt modals is not being enforced.

Steps To Reproduce

1. Go to the demo page and open a "Prompt" modal.
2. Delete everything in the text input and submit.
3. Modal closes despite having required set.

Anything else?

skeleton/src/lib/utilities/Modal/Modal.svelte

Lines 174 to 181 in d8a4115

	{:else if $modalStore[0].type === 'prompt'}
	<!-- Template: Prompt -->
	<input class="modal-prompt-input" type="text" bind:value={promptValue} required />
	<!-- prettier-ignore -->
	<footer class="modal-footer {regionFooter}">
	<button class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
	<button class="btn {buttonPositive}" on:click={onPromptSubmit}>{buttonTextSubmit}</button>
	</footer>

L176 perhaps needs to be wrapped in a form.

By the way, is it a good idea to submit on enter? It feels more intuitive, but I'm not sure if it fails to comply with accessibility standards.

[endigo9740]

FYI I went about this a little bit different than your suggestion. Instead of trying to make it a proper form, I just made it so the submit button is set to disabled if the value is not present. This provides the desired result.

<button class="btn {buttonPositive}" on:click={onPromptSubmit} disabled={!promptValue}>