(Picker) Fix OnChange event for AutoHeight change not firing in custom pages

Calendar/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "name": "vscode-jest-tests",
+      "request": "launch",
+      "args": ["${fileBasename}", "--runInBand", "--code-coverage=false" ],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "smartStep": true,
+      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      "skipFiles": ["node_modules/**/*.js", "<node_internals>/**/*.js", "async_hooks.js", "inspector_async_hook.js"]
+    }
+  ]
+}

Calendar/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

Calendar/config/tests.js

@@ -7,5 +7,8 @@ const Adapter = require('enzyme-adapter-react-16');
 // Initialize icons.
 initializeIcons(undefined, { disableWarnings: true });
 
+// Ensure the test snapshots are consistent when using today's date
+jest.useFakeTimers('modern').setSystemTime(new Date(2022, 8, 1, 12, 0, 0));
+
 // Configure enzyme.
 configure({ adapter: new Adapter() });

Picker/Picker/TagPickerComponent.tsx

@@ -42,7 +42,7 @@ export interface TagPickerComponentProps {
     onAdd: (item: ITag) => void;
     filterSuggestions: (search: string) => Promise<ITag[]> | ITag[];
     onResize?: (width: number, height: number) => void;
-    minumumFilterLength: number | null;
+    minimumFilterLength: number | null;
     keepTypingMessage: string | null;
     noSuggestionsMessage: string | null;
     maxTags: number | undefined;
@@ -86,7 +86,7 @@ export const TagPickerComponent = React.memo((props: TagPickerComponentProps) =>
         onRemove,
         onAdd,
         filterSuggestions,
-        minumumFilterLength,
+        minimumFilterLength,
         keepTypingMessage,
         noSuggestionsMessage,
         maxTags,
@@ -141,6 +141,7 @@ export const TagPickerComponent = React.memo((props: TagPickerComponentProps) =>
         // This is needed for custom pages to ensure the Tag Picker grows to the full width
         return {
             width: width,
+            height: 'fit-content',
         } as React.CSSProperties;
     }, [width]);
 
@@ -257,11 +258,11 @@ export const TagPickerComponent = React.memo((props: TagPickerComponentProps) =>
     const pickerSuggestionsProps: IBasePickerSuggestionsProps = React.useMemo(() => {
         return {
             noResultsFoundText:
-                searchTerm && minumumFilterLength && searchTerm.length < minumumFilterLength
+                searchTerm && minimumFilterLength && searchTerm.length < minimumFilterLength
                     ? (keepTypingMessage as string)
                     : (noSuggestionsMessage as string),
         };
-    }, [searchTerm, keepTypingMessage, noSuggestionsMessage, minumumFilterLength]);
+    }, [searchTerm, keepTypingMessage, noSuggestionsMessage, minimumFilterLength]);
 
     const target = React.useRef<HTMLElement>(null);
 

Picker/Picker/__tests__/__snapshots__/picker-lifecycle.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`Picker renders 1`] = `
   className="PowerCATTagPicker"
   style={
     Object {
+      "height": "fit-content",
       "width": -1,
     }
   }
@@ -142,6 +143,7 @@ exports[`Picker renders with simple tags 1`] = `
   className="PowerCATTagPicker"
   style={
     Object {
+      "height": "fit-content",
       "width": -1,
     }
   }
@@ -281,7 +283,7 @@ exports[`Picker renders with simple tags 1`] = `
                   background: #0078d4;
                   color: #ffffff;
                 }
-                @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
                   border: 1px solid WindowText;
                 }
             role="listitem"
@@ -351,7 +353,7 @@ exports[`Picker renders with simple tags 1`] = `
                     top: 2px;
                     z-index: 1;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
                     bottom: -2px;
                     left: -2px;
                     outline-color: ButtonText;
@@ -368,7 +370,7 @@ exports[`Picker renders with simple tags 1`] = `
                     background: #e1dfdd;
                     color: #323130;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
                     border-color: Highlight;
                     color: Highlight;
                   }
@@ -483,7 +485,7 @@ exports[`Picker renders with simple tags 1`] = `
                   background: #0078d4;
                   color: #ffffff;
                 }
-                @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
                   border: 1px solid WindowText;
                 }
             role="listitem"
@@ -553,7 +555,7 @@ exports[`Picker renders with simple tags 1`] = `
                     top: 2px;
                     z-index: 1;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
                     bottom: -2px;
                     left: -2px;
                     outline-color: ButtonText;
@@ -570,7 +572,7 @@ exports[`Picker renders with simple tags 1`] = `
                     background: #e1dfdd;
                     color: #323130;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
                     border-color: Highlight;
                     color: Highlight;
                   }
@@ -685,7 +687,7 @@ exports[`Picker renders with simple tags 1`] = `
                   background: #0078d4;
                   color: #ffffff;
                 }
-                @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
                   border: 1px solid WindowText;
                 }
             role="listitem"
@@ -755,7 +757,7 @@ exports[`Picker renders with simple tags 1`] = `
                     top: 2px;
                     z-index: 1;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
                     bottom: -2px;
                     left: -2px;
                     outline-color: ButtonText;
@@ -772,7 +774,7 @@ exports[`Picker renders with simple tags 1`] = `
                     background: #e1dfdd;
                     color: #323130;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
                     border-color: Highlight;
                     color: Highlight;
                   }

Picker/Picker/__tests__/tag-picker-component.test.tsx

@@ -22,7 +22,7 @@ const defaultProps = {
     height: 32,
     tags: [] as ITag[],
     tabIndex: 1,
-    minumumFilterLength: 0,
+    minimumFilterLength: 0,
     keepTypingMessage: null,
     noSuggestionsMessage: null,
     maxTags: undefined,

Picker/Picker/index.ts

@@ -19,9 +19,9 @@ export class Picker implements ComponentFramework.ReactControl<IInputs, IOutputs
     resources: ComponentFramework.Resources;
     tags: ITagItem[];
     isFullScreen = false;
-    tagEvent: string | undefined;
-    tagDisplayName: string | undefined;
-    tagKey: string | undefined;
+    tagEvent = '';
+    tagDisplayName: string | undefined = '';
+    tagKey: string | undefined = '';
     suggestions: ITagItem[];
     searchText: string;
     previousSearchText: string;
@@ -137,7 +137,7 @@ export class Picker implements ComponentFramework.ReactControl<IInputs, IOutputs
             onAdd: this.addTag,
             onRemove: this.removeTag,
             filterSuggestions: this.filterSuggestions,
-            minumumFilterLength: this.context.parameters.MinimumSearchTermLength.raw,
+            minimumFilterLength: this.context.parameters.MinimumSearchTermLength.raw,
             keepTypingMessage: this.context.parameters.SearchTermToShortMessage.raw,
             noSuggestionsMessage: this.context.parameters.NoSuggestionFoundMessage.raw,
             maxTags: this.undefinedIfZero(this.context.parameters.MaxTags),
@@ -179,8 +179,8 @@ export class Picker implements ComponentFramework.ReactControl<IInputs, IOutputs
         const keyIndex: Record<string, number> = {};
         return tagsDataset.sortedRecordIds.map((id) => {
             const record = tagsDataset.records[id];
-            const recordid = record.getRecordId();
-            let key = (record.getValue(TagsColumns.TagsKey) as string) ?? recordid;
+            const recordId = record.getRecordId();
+            let key = (record.getValue(TagsColumns.TagsKey) as string) ?? recordId;
             // Prevent duplicate keys by appending the duplicate index
             if (keyIndex[key] !== undefined) {
                 keyIndex[key]++;
@@ -206,8 +206,8 @@ export class Picker implements ComponentFramework.ReactControl<IInputs, IOutputs
         const keyIndex: Record<string, number> = {};
         return suggestionsDataset.sortedRecordIds.map((id) => {
             const record = suggestionsDataset.records[id];
-            const recordid = record.getRecordId();
-            let key = (record.getValue(SuggestionsColumns.SuggestionKey) as string) ?? recordid;
+            const recordId = record.getRecordId();
+            let key = (record.getValue(SuggestionsColumns.SuggestionKey) as string) ?? recordId;
             // Prevent duplicate keys by appending the duplicate index
             if (keyIndex[key] !== undefined) {
                 keyIndex[key]++;