feat(combobox): add single-persist selection mode #7583

jcfranco · 2023-08-23T06:20:45Z

Related Issue: #4738

Summary

Adds single-persist mode to calcite-combobox to allow users to opt-in to this change in selection behavior (vs making it a breaking change on the current single selection mode).

clearDisabled would behave the same way unless we want to make an exception to this mode.

jcfranco · 2023-08-24T18:08:41Z

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -200,10 +200,11 @@ export class Combobox
   * Specifies the selection mode:
   * - `multiple` allows any number of selected items (default),
   * - `single` allows only one selection,
+   * - `single-persist` is like single, but does not allow deselecting,


+@geospatialem for editorial consideration 📖🔍👁️👄👁️

You win the internet, @driskull. 🏆🌐

In accordion we use:

"single-persist" allow and require one open item.

For consistency, WDYT about:

"single-persist" allows and requires one selection,

geospatialem

Few editorial comments below for consideration.

geospatialem · 2023-08-25T16:58:59Z

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

@@ -85,12 +85,13 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   * Specifies the selection mode:
   * - `multiple` allows any number of selected items (default),
   * - `single` allows only one selection,
+   * - `single-persist` is like single, but does not allow deselecting,


In accordion we use:

"single-persist" allow and require one open item.

For consistency, WDYT about:

"single-persist" allows and requires one selection,

geospatialem · 2023-08-25T16:59:55Z

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -200,10 +200,11 @@ export class Combobox
   * Specifies the selection mode:
   * - `multiple` allows any number of selected items (default),
   * - `single` allows only one selection,
+   * - `single-persist` is like single, but does not allow deselecting,


In accordion we use:

"single-persist" allow and require one open item.

For consistency, WDYT about:

"single-persist" allows and requires one selection,

geospatialem · 2023-08-25T17:01:08Z

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

   * Specifies the selection mode:
   * - `multiple` allows any number of selected items (default),
   * - `single` allows only one selection,
+   * - `single-persist` is like single, but does not allow deselecting,


nitpick:

For consistency, can we add double quotes to each of the values? For instance:

- `"multiple"`.... - `"single"`.... - `"single-persist"`... - etc.

geospatialem · 2023-08-25T17:01:25Z

packages/calcite-components/src/components/combobox/combobox.tsx

   * - `multiple` allows any number of selected items (default),
   * - `single` allows only one selection,
+   * - `single-persist` is like single, but does not allow deselecting,


nitpick:

For consistency, can we add double quotes to each of the values? For instance:

- `"multiple"`.... - `"single"`.... - `"single-persist"`... - etc.

driskull

👍 Looks great 💯 🌮 🏆

benelan

👍

benelan · 2023-08-25T18:13:10Z

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -1134,7 +1135,7 @@ export class Combobox
  }

  isMulti(): boolean {
-    return this.selectionMode !== "single";
+    return this.selectionMode !== "single" && this.selectionMode !== "single-persist";


Could this be return !isSingleLike(this.selectionMode)?

benelan · 2023-08-25T18:13:51Z

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -1187,7 +1188,7 @@ export class Combobox

  renderInput(): VNode {
    const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
-    const single = selectionMode === "single";
+    const single = selectionMode === "single" || selectionMode === "single-persist";


could this be const single = isSingleLike(selectionMode)?

Nice catches! 🎣

benelan · 2023-08-25T18:14:03Z

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -1284,7 +1285,7 @@ export class Combobox
    const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
    const selectedItem = selectedItems[0];
    const selectedIcon = selectedItem?.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = selectionMode === "single" || selectionMode === "single-persist";


could this be const single = isSingleLike(selectionMode)?

…input * origin/main: chore: release next fix(tree-item): updates state when selection changes programmatically for `selection-mode='ancestors'` (#7572) chore: release next feat(combobox): add single-persist selection mode (#7583) chore: release next fix(modal): catch error when beforeClose promise is rejected (#7600) fix(flow): catch error when beforeBack promise is rejected (#7601) test(list): Use the dragAndDrop utility for mouse tests (#7604)

**Related Issue:** #4738 ## Summary Adds `single-persist` mode to `calcite-combobox` to allow users to opt-in to this change in selection behavior (vs making it a breaking change on the current `single` selection mode). `clearDisabled` will behave the same way unless we want to make an exception to this mode.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.1...@esri/calcite-components@1.7.0) (2023-09-01) ### Features * **action-bar, action-pad, action-group:** Add label properties for group context ([#7415](#7415)) ([b34f36d](b34f36d)) * **combobox:** Add single-persist selection mode ([#7583](#7583)) ([dab06a3](dab06a3)) * **flow:** Add support for custom flow-item elements ([#7608](#7608)) ([197adfe](197adfe)) * **input-date-picker:** Normalize year to current century for user typed values only ([#7638](#7638)) ([a1db718](a1db718)) * **input-number:** Add integer property ([#7646](#7646)) ([cd66a6d](cd66a6d)) * **input-time-picker:** Support fractional seconds ([#7532](#7532)) ([c2bf34b](c2bf34b)) * **meter:** Add Meter component ([#7401](#7401)) ([47163ed](47163ed)) * **sheet:** Add Sheet component ([#7561](#7561)) ([f12a393](f12a393)) * **sheet:** Update default widths ([#7617](#7617)) ([47d2c0b](47d2c0b)) * **shell:** Add "Sheets" Slot ([#7579](#7579)) ([e798765](e798765)) * **table:** Add Table and related components ([#7607](#7607)) ([b067e72](b067e72)) ### Bug Fixes * **accordion, accordion-item:** Improve a11y ([#7560](#7560)) ([b5170b6](b5170b6)) * Add drag styles for improved UX ([#7644](#7644)) ([afbb764](afbb764)) * **block, block-section:** Improve a11y ([#7557](#7557)) ([1f44f6b](1f44f6b)) * **chip-group:** Add existence checks ([#7586](#7586)) ([5ca64f1](5ca64f1)) * **color-picker:** Update value when alphaChannel is toggled ([#7563](#7563)) ([1f753dd](1f753dd)) * **combobox:** Prevent deselecting items via keyboard in single-persist mode ([#7634](#7634)) ([4f5f8b0](4f5f8b0)) * **combobox:** Update combobox height to follow design spec ([#7558](#7558)) ([ec08845](ec08845)) * **date-picker:** Set start of week to monday in zh-CN ([#7578](#7578)) ([7e385cb](7e385cb)) * **dropdown:** Prevents navigating dropdown items with Tab key ([#7527](#7527)) ([3ea658d](3ea658d)) * Ensure label only focuses the first labelable child ([#7553](#7553)) ([426159c](426159c)) * **flow:** Catch error when beforeBack promise is rejected ([#7601](#7601)) ([cb70671](cb70671)) * **input-date-picker, input-time-picker:** Do not show dropdown affordance when read-only ([#7559](#7559)) ([5a3f19c](5a3f19c)) * **input, input-number:** Correctly sanitize numbers when pasting string with 'e' ([#7648](#7648)) ([b8bc11c](b8bc11c)) * **list, sortable-list, value-list:** Emit calciteListOrderChange when dragging between lists ([#7614](#7614)) ([4653581](4653581)) * **list:** Fixes dragging nested list items ([#7555](#7555)) ([c25f7b3](c25f7b3)) * **list:** Stop emitting calciteListChange when a list-item is disabled or closed. ([#7624](#7624)) ([7008463](7008463)) * **loader:** Tweak loading animations to work in Safari ([#7564](#7564)) ([2103654](2103654)) * **modal:** Catch error when beforeClose promise is rejected ([#7600](#7600)) ([70405d0](70405d0)) * **modal:** Handle removal of open attribute and prevent multiple beforeClose calls ([#7470](#7470)) ([f31588f](f31588f)) * **rating:** Adds focus outline on click ([#7341](#7341)) ([af30073](af30073)) * **segmented-control:** Refresh items when added dynamically ([#7567](#7567)) ([2e36eb3](2e36eb3)) * **split-button:** Update divider and borders to follow design spec ([#7568](#7568)) ([8df59ab](8df59ab)) * **tree-item:** Move focus outline to item label area ([#7581](#7581)) ([1327cef](1327cef)) * **tree-item:** Updates state when selection changes programmatically for `selection-mode='ancestors'` ([#7572](#7572)) ([40758c5](40758c5)) * **tree:** Improve keyboard navigation ([#7618](#7618)) ([826a5cb](826a5cb)) </details> <details><summary>@esri/calcite-components-react: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.1...@esri/calcite-components-react@1.7.0) (2023-09-01) ### Bug Fixes * Make sure components are defined in environments like in codesandbox ([#7632](#7632)) ([7005cce](7005cce)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.7.0-next.22 to ^1.7.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(combobox): add single-persist selection mode

00a0e22

github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 23, 2023

github-actions bot assigned jcfranco Aug 23, 2023

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 23, 2023

jcfranco marked this pull request as ready for review August 24, 2023 18:07

jcfranco requested a review from a team as a code owner August 24, 2023 18:07

jcfranco commented Aug 24, 2023

View reviewed changes

geospatialem reviewed Aug 25, 2023

View reviewed changes

driskull approved these changes Aug 25, 2023

View reviewed changes

benelan approved these changes Aug 25, 2023

View reviewed changes

jcfranco added 2 commits August 25, 2023 11:24

editorial tweaks

bb7544a

tidy up

45f1bf9

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 25, 2023

jcfranco merged commit dab06a3 into main Aug 25, 2023
16 checks passed

jcfranco deleted the jcfranco/4738-add-single-persist-mode-to-combobox branch August 25, 2023 20:20

github-actions bot added this to the 2023 August Priorities milestone Aug 25, 2023

calcite-admin mentioned this pull request Aug 25, 2023

chore: release main #7571

Merged

jcfranco mentioned this pull request Aug 25, 2023

Input Time Zone: can't retrieve appropriate offset value or message after deselecting dropdown option #7530

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(combobox): add single-persist selection mode #7583

feat(combobox): add single-persist selection mode #7583

jcfranco commented Aug 23, 2023 •

edited

jcfranco Aug 24, 2023

driskull Aug 24, 2023

jcfranco Aug 24, 2023

geospatialem Aug 25, 2023

geospatialem left a comment

geospatialem Aug 25, 2023

geospatialem Aug 25, 2023

geospatialem Aug 25, 2023

geospatialem Aug 25, 2023

driskull left a comment

benelan left a comment

benelan Aug 25, 2023

benelan Aug 25, 2023

jcfranco Aug 25, 2023

benelan Aug 25, 2023

feat(combobox): add single-persist selection mode #7583

feat(combobox): add single-persist selection mode #7583

Conversation

jcfranco commented Aug 23, 2023 • edited

Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geospatialem left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull left a comment

Choose a reason for hiding this comment

benelan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco commented Aug 23, 2023 •

edited