Merge pull request #1287 from ing-bank/feat/comboboxFeatAndFix

Feat/combobox feat and fix

.changeset/cool-peaches-burn.md

@@ -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

docs/components/inputs/combobox/features.md

@@ -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) =>

docs/docs/systems/overlays/assets/umbrella-form.js

@@ -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);

packages/combobox/src/LionCombobox.js

@@ -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) {
+  _syncToTextboxCondition(modelValue, oldModelValue, { phase } = {}) {
-    return this.autocomplete === 'inline' || this.autocomplete === 'both';
+    return (
+      this.autocomplete === 'inline' || this.autocomplete === 'both' || phase === 'overlay-close'
+    );
   }
 
   /**

packages/combobox/test/lion-combobox.test.js

@@ -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">

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -181,7 +181,11 @@ const ChoiceGroupMixinImplementation = superclass =>
       super.disconnectedCallback();
 
       if (this.registrationComplete.done === false) {
+        Promise.resolve().then(() => {
+          Promise.resolve().then(() => {
             this.__rejectRegistrationComplete();
+          });
+        });
       }
     }
 

packages/form-core/src/form-group/FormGroupMixin.js

@@ -184,7 +184,9 @@ const FormGroupMixinImplementation = superclass =>
         this.__hasActiveOutsideClickHandling = false;
       }
       if (this.registrationComplete.done === false) {
+        Promise.resolve().then(() => {
           this.__rejectRegistrationComplete();
+        });
       }
     }
 

packages/form-integrations/test/dialog-integrations.js

@@ -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();
+  });
+});