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.

Sign up for GitHub

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

Jump to bottom

feat: picker zero selection #6780

Merged
merged 5 commits into from
Aug 8, 2023
Merged

feat: picker zero selection #6780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f113c2
picker zero items
scomea Jul 13, 2023
0e33b90
Change files
scomea Jul 13, 2023
58135c5
prettier
scomea Jul 13, 2023
108ba8d
default to null
scomea Jul 13, 2023
774161c
update files
scomea Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@microsoft-fast-foundation-2b6fd22d-b799-4e12-ba59-696ca95be77b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "picker zero items",
"packageName": "@microsoft/fast-foundation",
"email": "stephcomeau@msn.com",
"dependentChangeType": "prerelease"
}
2 changes: 1 addition & 1 deletion packages/web-components/fast-foundation/docs/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1547,7 +1547,7 @@ export class FASTPicker extends FormAssociatedPicker {
// (undocumented)
protected listItemTemplateChanged(): void;
loadingText: string;
maxSelected: number | undefined;
maxSelected: number | null;
// @internal
menuConfig: AnchoredRegionConfig;
// @internal
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/fast-foundation/src/picker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export class FASTTextField extends TextField {}
| `options` | public | `string` | | Currently available options. Comma delineated string ie. "apples,oranges". | |
| `filterSelected` | public | `boolean` | `true` | Whether the component should remove an option from the list when it is in the selection | |
| `filterQuery` | public | `boolean` | `true` | Whether the component should remove options based on the current query | |
| `maxSelected` | public | `number or undefined` | | The maximum number of items that can be selected. | |
| `maxSelected` | public | `number or null` | `null` | The maximum number of items that can be selected. | |
| `noSuggestionsText` | public | `string` | `"No suggestions available"` | The text to present to assistive technolgies when no suggestions are available. | |
| `suggestionsAvailableText` | public | `string` | `"Suggestions available"` | The text to present to assistive technolgies when suggestions are available. | |
| `loadingText` | public | `string` | `"Loading suggestions"` | The text to present to assistive technologies when suggestions are loading. | |
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/fast-foundation/src/picker/picker.spec.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Picker is the top level container which hosts both a `picker-list` component to
*Attributes:*
- `selection`: List of currently selected items. Comma delineated string ie. "apples,oranges".
- `options`: Currently available options. Comma delineated string ie. "apples,oranges".
- `max-selected`: The maximum number of items that can be selected. Unset by default (ie. no maximum).
- `max-selected`: The maximum number of items that can be selected. Unset by default (ie. no maximum). If the value is "0" selecting an item updates the query instead.
- `no-suggestions-text`: The text to present when no suggestions are available.
- `suggestions-available-text`: The text to present when suggestions are available.
- `loading-text`: The text to present when suggestions are loading.
Expand Down
25 changes: 14 additions & 11 deletions packages/web-components/fast-foundation/src/picker/picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
attr,
html,
HTMLView,
nullableNumberConverter,
observable,
oneWay,
ref,
Expand Down Expand Up @@ -117,8 +118,8 @@ export class FASTPicker extends FormAssociatedPicker {
* @remarks
* HTML Attribute: max-selected
*/
@attr({ attribute: "max-selected" })
public maxSelected: number | undefined;
@attr({ attribute: "max-selected", converter: nullableNumberConverter })
public maxSelected: number | null = null;

/**
* The text to present to assistive technolgies when no suggestions are available.
Expand Down Expand Up @@ -806,7 +807,8 @@ export class FASTPicker extends FormAssociatedPicker {
return;
}
if (
this.maxSelected !== undefined &&
this.maxSelected !== null &&
this.maxSelected !== 0 &&
this.selectedItems.length >= this.maxSelected
) {
if (this.getRootActiveElement() === this.inputElement) {
Expand Down Expand Up @@ -867,21 +869,22 @@ export class FASTPicker extends FormAssociatedPicker {
return false;
}

if (e.target instanceof FASTPickerMenuOption) {
if (e.target.value !== undefined) {
if (e.target instanceof FASTPickerMenuOption && e.target.value !== undefined) {
if (this.maxSelected === 0) {
// if we don't allow selection just update the query
this.query = e.target.value;
} else {
this.query = "";
this.selection = `${this.selection}${this.selection === "" ? "" : ","}${
e.target.value
}`;
}
this.inputElement.value = "";
this.query = "";
this.inputElement.focus();

this.toggleFlyout(false);
this.inputElement.focus();
return false;
}

// const value: string = (e.target as PickerMenuOption).value;

return true;
}

Expand Down Expand Up @@ -913,7 +916,7 @@ export class FASTPicker extends FormAssociatedPicker {
);
if (newFocusedItemIndex === selectedItemsAsElements.length) {
if (
this.maxSelected !== undefined &&
this.maxSelected !== null &&
this.selectedItems.length >= this.maxSelected
) {
(
Expand Down
Loading