Skip to content

Commit

Permalink
fix(ld-select): form validation / event timing
Browse files Browse the repository at this point in the history
  • Loading branch information
@renet
renet committed Oct 28, 2021
1 parent 958937c commit 8a4a58e
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 39 deletions.
66 changes: 35 additions & 31 deletions src/liquid/components/ld-select/ld-select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,10 @@ export class LdSelect {
@State() renderHiddenInput = false

@Watch('selected')
emitEvents(newSelection: SelectOption[], oldSelection: SelectOption[]) {
emitEventsAndUpdateHidden(
newSelection: SelectOption[],
oldSelection: SelectOption[]
) {
if (!this.initialized) return

const newValues = newSelection.map((option) => option.value)
Expand All @@ -115,6 +118,10 @@ export class LdSelect {

this.updateTriggerMoreIndicator(true)

if (this.renderHiddenInput) {
this.updateHiddenInput(newSelection)
}

this.input.emit(newValues)
this.change.emit(newValues)
}
Expand Down Expand Up @@ -356,31 +363,25 @@ export class LdSelect {
)
}

setTimeout(() => {
if (!initialized) {
this.internalOptionsHTML = this.el.innerHTML['replaceAll'](
/<ld-option/g,
`<ld-option-internal${this.multiple ? ' mode="checkbox"' : ''}${
this.size ? ' size="' + this.size + '"' : ''
}${this.preventDeselection ? ' prevent-deselection' : ''}`
if (!initialized) {
this.internalOptionsHTML = this.el.innerHTML['replaceAll'](
/<ld-option/g,
`<ld-option-internal${this.multiple ? ' mode="checkbox"' : ''}${
this.size ? ' size="' + this.size + '"' : ''
}${this.preventDeselection ? ' prevent-deselection' : ''}`
)
.replaceAll(/<\/ld-option/g, '</ld-option-internal')
.replaceAll(
/<ld-icon (.|\n|\r)*slot="icon"(.|\n|\r)*>(.|\n|\r)*<\/ld-icon>/g,
''
)
.replaceAll(/<\/ld-option/g, '</ld-option-internal')
.replaceAll(
/<ld-icon (.|\n|\r)*slot="icon"(.|\n|\r)*>(.|\n|\r)*<\/ld-icon>/g,
''
)
}
this.selected = selectedChildren.map((child) => ({
value: child.getAttribute('value'),
text: child.innerText,
}))

if (this.renderHiddenInput) {
this.updateHiddenInput(this.selected)
}
}
this.selected = selectedChildren.map((child) => ({
value: child.getAttribute('value'),
text: child.innerText,
}))

this.updateTriggerMoreIndicator(true)
})
this.updateTriggerMoreIndicator(true)
}

private updateHiddenInput = (selected: SelectOption[]) => {
Expand All @@ -392,6 +393,7 @@ export class LdSelect {
if (index >= 0) {
selectedValues.splice(index, 1)
} else {
console.log('here')
hiddenInput.remove()
}
})
Expand Down Expand Up @@ -425,11 +427,9 @@ export class LdSelect {
const oldValues = [...this.selected]
this.initOptions()

setTimeout(() => {
this.initialized = true
const newValues = [...this.selected]
this.emitEvents(newValues, oldValues)
})
this.initialized = true
const newValues = [...this.selected]
this.emitEventsAndUpdateHidden(newValues, oldValues)
}

private initObserver() {
Expand Down Expand Up @@ -837,11 +837,15 @@ export class LdSelect {
if (this.el.getAttribute('aria-disabled') === 'true') {
this.ariaDisabled = true
}
}

componentDidLoad() {
this.initOptions()

if (this.renderHiddenInput) {
this.updateHiddenInput(this.selected)
}
}

componentDidLoad() {
setTimeout(() => {
this.initObserver()
this.initialized = true
Expand Down
2 changes: 1 addition & 1 deletion src/liquid/components/ld-select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1191,7 +1191,7 @@ The `ld-select` Web Component provides a low level API for integrating it with t
const submitButton = document.querySelector('#example-form ld-button')
let selectDirty = false
function validateInput() {
if (selectDirty && (!form.fruits. || form.fruits.length < 3)) {
if (selectDirty && (!form.fruits || !form.fruits.length || form.fruits.length < 3)) {
select.setAttribute('invalid', 'true')
errorMessage.style.visibility = 'inherit'
return false
Expand Down
106 changes: 99 additions & 7 deletions src/liquid/components/ld-select/test/__snapshots__/ld-select.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,34 @@ exports[`ld-select creates hidden input field, if inside a form 1`] = `
</div>
</div>
</mock:shadow-root>
<div part="options-container"></div>
<div part="options-container">
<ld-option-internal value="apple">
<mock:shadow-root>
<div aria-disabled="false" aria-selected="false" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<svg class="ld-option-internal__check" fill="none" height="20" part="check" role="presentation" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M15 7L8.40795 13L5 9.63964" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="visibility: hidden;"></path>
</svg>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Apple
</ld-option-internal>
<ld-option-internal value="banana">
<mock:shadow-root>
<div aria-disabled="false" aria-selected="false" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<svg class="ld-option-internal__check" fill="none" height="20" part="check" role="presentation" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M15 7L8.40795 13L5 9.63964" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="visibility: hidden;"></path>
</svg>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Banana
</ld-option-internal>
</div>
</ld-select-popper>
</div>
</mock:shadow-root>
Expand Down Expand Up @@ -60,11 +87,49 @@ exports[`ld-select fills hidden input fields with initially selected option valu
</div>
<div class="ld-select__select" part="select">
<div aria-disabled="false" aria-expanded="false" aria-haspopup="listbox" aria-label="Pick a fruit" class="ld-select__btn-trigger" part="btn-trigger focusable" role="button" tabindex="0">
<span class="ld-select__btn-trigger-text-wrapper" part="trigger-text-wrapper" title="Pick a fruit">
<span class="ld-select__btn-trigger-text" part="trigger-text">
Pick a fruit
</span>
</span>
<ul aria-label="Selected options" class="ld-select__selection-list" part="selection-list">
<li class="ld-select__selection-list-item" part="selection-list-item" style="order: 1;">
<label class="ld-select__selection-label">
<span class="ld-select__selection-label-text" part="selection-label-text" title="Apple">
Apple
</span>
<button class="ld-select__btn-clear-single" part="btn-clear-single focusable">
<svg class="ld-select__btn-clear-single-icon" fill="none" part="icon-clear-single" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<title>
Clear
</title>
<path d="M2 2l8 8M2 10l8-8" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<span class="ld-select__selection-label-bg" part="selection-label-bg"></span>
</label>
</li>
<li class="ld-select__selection-list-item" part="selection-list-item" style="order: 2;">
<label class="ld-select__selection-label">
<span class="ld-select__selection-label-text" part="selection-label-text" title="Banana">
Banana
</span>
<button class="ld-select__btn-clear-single" part="btn-clear-single focusable">
<svg class="ld-select__btn-clear-single-icon" fill="none" part="icon-clear-single" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<title>
Clear
</title>
<path d="M2 2l8 8M2 10l8-8" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<span class="ld-select__selection-label-bg" part="selection-label-bg"></span>
</label>
</li>
</ul>
<button class="ld-select__btn-clear" part="btn-clear focusable">
<svg class="ld-select__btn-clear-icon" fill="none" part="icon-clear" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg">
<title>
Clear all
</title>
<path clip-rule="evenodd" d="M10 20a10 10 0 100-20 10 10 0 000 20z" fill="currentColor" fill-rule="evenodd"></path>
<path d="M6.67 6.67l6.67 6.66M6.67 13.33l6.67-6.66" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<slot name="icon"></slot>
<svg class="ld-select__icon" part="trigger-icon" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6l5 4 5-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
Expand All @@ -80,7 +145,34 @@ exports[`ld-select fills hidden input fields with initially selected option valu
</div>
</div>
</mock:shadow-root>
<div part="options-container"></div>
<div part="options-container">
<ld-option-internal mode="checkbox" selected="" value="apple">
<mock:shadow-root>
<div aria-disabled="false" aria-selected="true" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
<ld-checkbox checked="" class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
</div>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Apple
</ld-option-internal>
<ld-option-internal mode="checkbox" selected="" value="banana">
<mock:shadow-root>
<div aria-disabled="false" aria-selected="true" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
<ld-checkbox checked="" class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
</div>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Banana
</ld-option-internal>
</div>
</ld-select-popper>
</div>
</mock:shadow-root>
Expand Down

0 comments on commit 8a4a58e

Please sign in to comment.