Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(combobox): clear custom input value on blur #8070

Merged

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Oct 27, 2023

Related Issue: #2162

Summary

Clears input value on blur if the value has no matching combobox-item when allowCustomValue property is set to false

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Oct 27, 2023
@anveshmekala anveshmekala added the low risk Issues with low risk for consideration in low risk milestones label Oct 27, 2023
@anveshmekala anveshmekala marked this pull request as ready for review October 27, 2023 16:27
@anveshmekala anveshmekala requested a review from a team as a code owner October 27, 2023 16:27
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 27, 2023
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫
🚫🧊🚫🚫🚫🧊🚫🚫🧊🧊🚫🚫🧊🧊🧊🚫🚫🧊🧊🧊🚫🧊🧊🧊🧊🚫🧊🚫
🚫🧊🧊🚫🚫🧊🚫🧊🚫🚫🧊🚫🚫🧊🚫🚫🧊🚫🚫🚫🚫🧊🚫🚫🚫🚫🧊🚫
🚫🧊🚫🧊🚫🧊🚫🧊🚫🚫🧊🚫🚫🧊🚫🚫🧊🚫🚫🚫🚫🧊🧊🧊🚫🚫🧊🚫
🚫🧊🚫🚫🧊🧊🚫🧊🚫🚫🧊🚫🚫🧊🚫🚫🧊🚫🚫🚫🚫🧊🚫🚫🚫🚫🚫🚫
🚫🧊🚫🚫🚫🧊🚫🚫🧊🧊🚫🚫🧊🧊🧊🚫🚫🧊🧊🧊🚫🧊🧊🧊🧊🚫🧊🚫
🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫

await page.waitForChanges();
expect(await page.evaluate(() => document.activeElement.id)).not.toBe("myCombobox");
expect(await inputEl.getProperty("value")).toBe("");
expect(await combobox.getProperty("value")).toBe(allowCustomValues ? "asdf" : "");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: can you use a word vs asdf? I think the spelling linter will warn otherwise.

Applies to the test below.

@@ -160,8 +160,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
this.selected = !this.selected;
}

itemClickHandler = (event: MouseEvent): void => {
event.preventDefault();
itemClickHandler = (): void => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If possible, can you make this private? Up to you since we'll do a linting pass to fix these across the board.

expect(await inputEl.getProperty("value")).toBe("");
expect(await combobox.getProperty("value")).toBe(allowCustomValues ? "asdf" : "");
}
selectionModes.forEach((mode) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: for readability, can you add a newline above this to make it easier to scan?

@anveshmekala anveshmekala 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 Oct 27, 2023
@anveshmekala anveshmekala merged commit 327ff06 into main Oct 27, 2023
14 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/2162-combobox-clear-input-value-on-blur branch October 27, 2023 19:19
benelan pushed a commit that referenced this pull request Oct 30, 2023
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 1.1.0</summary>

##
[1.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.0.0...@esri/calcite-design-tokens@1.1.0)
(2023-10-30)


### Features

* Add icon tokens
([#8008](#8008))
([3623df1](3623df1))
* Add js platform formats to calcite-design-tokens
([#8044](#8044))
([0e1fefb](0e1fefb))
* Add xxs breakpoint to tokens
([#7992](#7992))
([05512b6](05512b6))
* Reorganize breakpoints
([#7994](#7994))
([c64a059](c64a059))
</details>

<details><summary>@esri/calcite-components: 1.10.0</summary>

##
[1.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.9.2...@esri/calcite-components@1.10.0)
(2023-10-30)


### Features

* **block:** Ensure chevron is always displayed
([#8014](#8014))
([95fecb2](95fecb2))
* **navigation-logo:** Adds `icon` and `iconFlipRtl` properties
([#8054](#8054))
([049056d](049056d))
* **stepper,stepper-item:** Adds support for built-in translations
([#8002](#8002))
([bb91624](bb91624))


### Bug Fixes

* **button, fab, inline-editable, split-button:** Prevent redundant
opacity when button is both loading and disabled
([#8015](#8015))
([3a1d3fd](3a1d3fd))
* **combobox:** Clear custom input value on blur
([#8070](#8070))
([327ff06](327ff06))
* **combobox:** Ensure icon scales are consistent
([#8075](#8075))
([babba3b](babba3b))
* **filter:** Corrects the accessible label
([#8069](#8069))
([c203084](c203084))
* Floating components will now get an initial position even if they are
not opened
([#8001](#8001))
([78b680d](78b680d))
* **icon:** Use pixel sizes for icons
([#8009](#8009))
([49085d5](49085d5))
* **input-date-picker, input-time-picker:** Adjust chevron scale
accordingly
([#8012](#8012))
([f894f80](f894f80))
* **input-time-zone:** Fix city translations
([#8058](#8058))
([7df7e1f](7df7e1f))
* **list-item:** Restore tabbability when an item's disabled prop is
toggled
([#8042](#8042))
([c970603](c970603))
* **pagination:** Prevents console error when page-size is set to zero
([#8017](#8017))
([d09d485](d09d485))
* **segmented-control-item:** Fix text color contrast
([#8036](#8036))
([ede8c43](ede8c43))
* **stepper:** Selects next enabled stepper-item when first one is
disabled
([#8004](#8004))
([e0ed54e](e0ed54e))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^1.1.0-next.3 to ^1.1.0
</details>

<details><summary>@esri/calcite-components-react: 1.10.0</summary>

##
[1.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.9.2...@esri/calcite-components-react@1.10.0)
(2023-10-30)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^1.10.0-next.11 to ^1.10.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. low risk Issues with low risk for consideration in low risk milestones pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants