Merge pull request #1287 from ing-bank/feat/comboboxFeatAndFix
Feat/combobox feat and fix
This commit is contained in:
Joren Broekema
GitHub
commit
79b3e50c5d
8 changed files with 240 additions and 6 deletions
12
.changeset/cool-peaches-burn.md
Normal file
12
.changeset/cool-peaches-burn.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
'@lion/combobox': minor
|
||||
'@lion/form-core': patch
|
||||
'@lion/form-integrations': patch
|
||||
---
|
||||
|
||||
Allow Subclassers of LionCombobox to set '\_syncToTextboxCondition' in closing phase of overlay
|
||||
|
||||
## Fixes
|
||||
|
||||
- form-core: allow an extra microtask in registration phase to make forms inside dialogs compatible.
|
||||
- combobox: open on focused when showAllOnEmpty
|
||||
|
|
@ -215,7 +215,10 @@ This will:
|
|||
```js preview-story
|
||||
export const multipleChoice = () => html`
|
||||
<lion-combobox name="combo" label="Multiple" multiple-choice>
|
||||
<demo-selection-display slot="selection-display"></demo-selection-display>
|
||||
<demo-selection-display
|
||||
slot="selection-display"
|
||||
style="display: contents;"
|
||||
></demo-selection-display>
|
||||
${lazyRender(
|
||||
listboxData.map(
|
||||
(entry, i) =>
|
||||
|
|
|
|||
126
docs/docs/systems/overlays/assets/umbrella-form.js
Normal file
126
docs/docs/systems/overlays/assets/umbrella-form.js
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { LitElement, html } from '@lion/core';
|
||||
import { Required, MinLength } from '@lion/form-core';
|
||||
import '@lion/form/define';
|
||||
import '@lion/fieldset/define';
|
||||
import '@lion/input/define';
|
||||
import '@lion/input-date/define';
|
||||
import '@lion/input-datepicker/define';
|
||||
import '@lion/input-amount/define';
|
||||
import '@lion/input-iban/define';
|
||||
import '@lion/input-email/define';
|
||||
import '@lion/checkbox-group/define';
|
||||
import '@lion/radio-group/define';
|
||||
import '@lion/select/define';
|
||||
import '@lion/select-rich/define';
|
||||
import '@lion/input-range/define';
|
||||
import '@lion/textarea/define';
|
||||
import '@lion/button/define';
|
||||
|
||||
export class UmbrellaForm extends LitElement {
|
||||
get _lionFormNode() {
|
||||
return /** @type {import('@lion/form').LionForm} */ (this.shadowRoot?.querySelector(
|
||||
'lion-form',
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<lion-form>
|
||||
<form>
|
||||
<lion-fieldset name="full_name">
|
||||
<lion-input
|
||||
name="first_name"
|
||||
label="First Name"
|
||||
.validators="${[new Required()]}"
|
||||
></lion-input>
|
||||
<lion-input
|
||||
name="last_name"
|
||||
label="Last Name"
|
||||
.validators="${[new Required()]}"
|
||||
></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-input-date
|
||||
name="date"
|
||||
label="Date of application"
|
||||
.modelValue="${new Date('2000/12/12')}"
|
||||
.validators="${[new Required()]}"
|
||||
></lion-input-date>
|
||||
<lion-input-datepicker
|
||||
name="datepicker"
|
||||
label="Date to be picked"
|
||||
.modelValue="${new Date('2020/12/12')}"
|
||||
.validators="${[new Required()]}"
|
||||
></lion-input-datepicker>
|
||||
<lion-textarea
|
||||
name="bio"
|
||||
label="Biography"
|
||||
.validators="${[new Required(), new MinLength(10)]}"
|
||||
help-text="Please enter at least 10 characters"
|
||||
></lion-textarea>
|
||||
<lion-input-amount name="money" label="Money"></lion-input-amount>
|
||||
<lion-input-iban name="iban" label="Iban"></lion-input-iban>
|
||||
<lion-input-email name="email" label="Email"></lion-input-email>
|
||||
<lion-checkbox-group
|
||||
label="What do you like?"
|
||||
name="checkers"
|
||||
.validators="${[new Required()]}"
|
||||
>
|
||||
<lion-checkbox .choiceValue=${'foo'} checked label="I like foo"></lion-checkbox>
|
||||
<lion-checkbox .choiceValue=${'bar'} checked label="I like bar"></lion-checkbox>
|
||||
<lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
<lion-radio-group
|
||||
name="dinosaurs"
|
||||
label="Favorite dinosaur"
|
||||
.validators="${[new Required()]}"
|
||||
>
|
||||
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
|
||||
<lion-radio .choiceValue=${'brontosaurus'} checked label="brontosaurus"></lion-radio>
|
||||
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
|
||||
</lion-radio-group>
|
||||
<lion-select-rich name="favoriteColor" label="Favorite color">
|
||||
<lion-options slot="input">
|
||||
<lion-option .choiceValue=${'red'}>Red</lion-option>
|
||||
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
|
||||
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
|
||||
</lion-options>
|
||||
</lion-select-rich>
|
||||
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
|
||||
<select slot="input">
|
||||
<option value="1">Fire up that loud</option>
|
||||
<option value="2">Another round of shots...</option>
|
||||
<option value="3">Drop down for what?</option>
|
||||
</select>
|
||||
</lion-select>
|
||||
<lion-input-range
|
||||
name="range"
|
||||
min="1"
|
||||
max="5"
|
||||
.modelValue="${2.3}"
|
||||
unit="%"
|
||||
step="0.1"
|
||||
label="Input range"
|
||||
>
|
||||
</lion-input-range>
|
||||
<lion-checkbox-group name="terms" .validators="${[new Required()]}">
|
||||
<lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
<lion-textarea name="comments" label="Comments"></lion-textarea>
|
||||
<div class="buttons">
|
||||
<lion-button raised>Submit</lion-button>
|
||||
<lion-button
|
||||
type="button"
|
||||
raised
|
||||
@click=${() => {
|
||||
const lionForm = this._lionFormNode;
|
||||
lionForm.resetGroup();
|
||||
}}
|
||||
>Reset</lion-button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</lion-form>
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define('umbrella-form', UmbrellaForm);
|
||||
|
|
@ -390,6 +390,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
|
|||
*/
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
_showOverlayCondition({ lastKey }) {
|
||||
if (this.showAllOnEmpty && this.focused) {
|
||||
return true;
|
||||
}
|
||||
// when no keyboard action involved (on focused change), return current opened state
|
||||
if (!lastKey) {
|
||||
return this.opened;
|
||||
|
|
@ -440,7 +443,12 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
|
|||
|
||||
__onOverlayClose() {
|
||||
if (!this.multipleChoice) {
|
||||
if (this.checkedIndex !== -1) {
|
||||
if (
|
||||
this.checkedIndex !== -1 &&
|
||||
this._syncToTextboxCondition(this.modelValue, this.__oldModelValue, {
|
||||
phase: 'overlay-close',
|
||||
})
|
||||
) {
|
||||
this._inputNode.value = this.formElements[
|
||||
/** @type {number} */ (this.checkedIndex)
|
||||
].choiceValue;
|
||||
|
|
@ -739,12 +747,15 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
|
|||
}
|
||||
|
||||
/**
|
||||
* @overridable
|
||||
* @param {string|string[]} modelValue
|
||||
* @param {string|string[]} oldModelValue
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
_syncToTextboxCondition(modelValue, oldModelValue) {
|
||||
return this.autocomplete === 'inline' || this.autocomplete === 'both';
|
||||
_syncToTextboxCondition(modelValue, oldModelValue, { phase } = {}) {
|
||||
return (
|
||||
this.autocomplete === 'inline' || this.autocomplete === 'both' || phase === 'overlay-close'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -177,6 +177,22 @@ describe('lion-combobox', () => {
|
|||
el.autocomplete = 'both';
|
||||
await performChecks();
|
||||
});
|
||||
|
||||
it('shows overlay on focusin', async () => {
|
||||
const el = /** @type {LionCombobox} */ (await fixture(html`
|
||||
<lion-combobox name="foo" .showAllOnEmpty="${true}">
|
||||
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
||||
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
|
||||
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
|
||||
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
|
||||
</lion-combobox>
|
||||
`));
|
||||
|
||||
expect(el.opened).to.be.false;
|
||||
el._comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
|
||||
await el.updateComplete;
|
||||
expect(el.opened).to.be.true;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -936,6 +952,46 @@ describe('lion-combobox', () => {
|
|||
await performChecks('both', [0, 1], '');
|
||||
});
|
||||
|
||||
it('is possible to adjust textbox synchronize condition on overlay close', async () => {
|
||||
const el = /** @type {LionCombobox} */ (await fixture(html`
|
||||
<lion-combobox name="foo" autocomplete="none" ._syncToTextboxCondition="${() => false}">
|
||||
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
||||
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
|
||||
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
|
||||
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
|
||||
</lion-combobox>
|
||||
`));
|
||||
expect(el._inputNode.value).to.equal('');
|
||||
|
||||
/**
|
||||
* @param {'none' | 'list' | 'inline' | 'both'} autocomplete
|
||||
* @param {number|number[]} index
|
||||
* @param {string} valueOnClose
|
||||
*/
|
||||
async function performChecks(autocomplete, index, valueOnClose) {
|
||||
await el.updateComplete;
|
||||
el.opened = true;
|
||||
el.setCheckedIndex(-1);
|
||||
await el.updateComplete;
|
||||
el.autocomplete = autocomplete;
|
||||
el.setCheckedIndex(index);
|
||||
el.opened = false;
|
||||
await el.updateComplete;
|
||||
expect(el._inputNode.value).to.equal(valueOnClose);
|
||||
}
|
||||
|
||||
await performChecks('none', 0, '');
|
||||
await performChecks('list', 0, '');
|
||||
await performChecks('inline', 0, '');
|
||||
await performChecks('both', 0, '');
|
||||
|
||||
el.multipleChoice = true;
|
||||
await performChecks('none', [0, 1], '');
|
||||
await performChecks('list', [0, 1], '');
|
||||
await performChecks('inline', [0, 1], '');
|
||||
await performChecks('both', [0, 1], '');
|
||||
});
|
||||
|
||||
it('does inline autocompletion when adding chars', async () => {
|
||||
const el = /** @type {LionCombobox} */ (await fixture(html`
|
||||
<lion-combobox name="foo" autocomplete="inline">
|
||||
|
|
|
|||
|
|
@ -181,7 +181,11 @@ const ChoiceGroupMixinImplementation = superclass =>
|
|||
super.disconnectedCallback();
|
||||
|
||||
if (this.registrationComplete.done === false) {
|
||||
this.__rejectRegistrationComplete();
|
||||
Promise.resolve().then(() => {
|
||||
Promise.resolve().then(() => {
|
||||
this.__rejectRegistrationComplete();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -184,7 +184,9 @@ const FormGroupMixinImplementation = superclass =>
|
|||
this.__hasActiveOutsideClickHandling = false;
|
||||
}
|
||||
if (this.registrationComplete.done === false) {
|
||||
this.__rejectRegistrationComplete();
|
||||
Promise.resolve().then(() => {
|
||||
this.__rejectRegistrationComplete();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
20
packages/form-integrations/test/dialog-integrations.js
Normal file
20
packages/form-integrations/test/dialog-integrations.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { expect, fixture, html } from '@open-wc/testing';
|
||||
import './helpers/umbrella-form.js';
|
||||
import '@lion/dialog/lion-dialog.js';
|
||||
|
||||
/**
|
||||
* @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
|
||||
* @typedef {import('@lion/dialog/').LionDialog} LionDialog
|
||||
*/
|
||||
|
||||
// Test umbrella form inside dialog
|
||||
describe('Form inside dialog Integrations', () => {
|
||||
it('"Successfully spawns all form components inside a dialog', async () => {
|
||||
expect(
|
||||
await fixture(html` <lion-dialog>
|
||||
<button slot="invoker">Open Dialog</button>
|
||||
<umbrella-form slot="content"></umbrella-form>
|
||||
</lion-dialog>`),
|
||||
).to.not.throw();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue