mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Remove required on sl-radio checks from sl-radio-group

pull/595/head
Jeremiah Hoyet 2021-11-22 14:05:14 -05:00
rodzic 0c6060eae7
commit 989e368fb4
2 zmienionych plików z 19 dodań i 27 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

36
docs/components/radio-group.md
Wyświetl plik

@ -55,7 +55,7 @@ const App = () => (
Adding a `required` attribute to `sl-radio-group` will require at least one option to be selected.
```html preview
<sl-radio-group id="radio-group1" label="Select an option" fieldset required>
<sl-radio-group class="required-radio-group" label="Select an option" fieldset required>
<sl-radio value="1" name="foo">Option 1</sl-radio>
<sl-radio value="2" name="foo">Option 2</sl-radio>
<sl-radio value="3" name="foo">Option 3</sl-radio>
@ -63,34 +63,26 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
<br />
<sl-button id="group1">Validate Group</sl-button>
<sl-button class="required-button">Validate Group</sl-button>
<script>
const button = document.getElementById('group1');
const group = document.getElementById('radio-group1');
const button = document.querySelector('sl-button.required-button');
const group = document.querySelector('sl-radio-group.required-radio-group');
button.addEventListener('click', ()=> group.reportValidity())
</script>
```
Alternatively, if any of the `sl-radio` elements has a `required` attribute, `sl-radio-group` mimics the behaviour of the browser and will require at least one selection from the group.
```jsx react
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
```html preview
<sl-radio-group id="radio-group2" label="Select an option" fieldset>
<sl-radio value="1" name="foo" required>Option 1</sl-radio>
<sl-radio value="2" name="foo">Option 2</sl-radio>
<sl-radio value="3" name="foo">Option 3</sl-radio>
</sl-radio-group>
<br />
<sl-button id="group2">Validate Group</sl-button>
<script>
const button = document.getElementById('group2');
const group = document.getElementById('radio-group2');
button.addEventListener('click', ()=> group.reportValidity())
</script>
const App = () => (
<SlRadioGroup label="Select an option" fieldset>
<SlRadio value="1" checked>Option 1</SlRadio>
<SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup>
);
```
[component-metadata:sl-radio-group]

10
src/components/radio-group/radio-group.ts
Wyświetl plik

@ -46,16 +46,16 @@ export default class SlRadioGroup extends LitElement {
const radios = [...(this.defaultSlot.assignedElements({ flatten: true }) as SlRadio[])];
let isChecked = true;
// Set required to true if any of the radio elements are required
this.required = this.required || radios.some(el => el.required);
if (this.required && radios.length > 0) {
isChecked = radios.some(el => el.checked);
if (!isChecked) {
// This is hacky...
radios[0].required = true;
// Trigger validity message on first input
radios[0].reportValidity();
setTimeout(() => {
radios[0].reportValidity();
}, 0);
}
}