(Picklist, Lookup): resolve VRT issues

Author: msmx-mnakagawa

src/scripts/Lookup.tsx

@@ -1364,24 +1364,28 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                 </div>
               </div>
             </div>
-            <LookupDropdown
-              portalClassName={containerClassNames}
-              opened={opened}
-              loading={loading}
-              listboxId={listboxId}
-              dropdownRef={dropdownRef}
-              listHeader={listHeader}
-              listHeaderIdSeed={listHeaderIdSeed}
-              listFooter={listFooter}
-              listFooterIdSeed={listFooterIdSeed}
-              filteredData={filteredData}
-              focusedValue={focusedValue}
-              getOptionId={getOptionId}
-              onOptionClick={onOptionClick}
-              onOptionFocus={onOptionFocus}
-              onBlur={onInputBlur}
-              onKeyDown={onInputKeyDown}
-            />
+            <div className='slds-combobox_container'>
+              <div className={comboboxClassNames}>
+                <LookupDropdown
+                  portalClassName={containerClassNames}
+                  opened={opened}
+                  loading={loading}
+                  listboxId={listboxId}
+                  dropdownRef={dropdownRef}
+                  listHeader={listHeader}
+                  listHeaderIdSeed={listHeaderIdSeed}
+                  listFooter={listFooter}
+                  listFooterIdSeed={listFooterIdSeed}
+                  filteredData={filteredData}
+                  focusedValue={focusedValue}
+                  getOptionId={getOptionId}
+                  onOptionClick={onOptionClick}
+                  onOptionFocus={onOptionFocus}
+                  onBlur={onInputBlur}
+                  onKeyDown={onInputKeyDown}
+                />
+              </div>
+            </div>
           </div>
         </FormElement>
       );
@@ -1410,25 +1414,25 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               onInputKeyDown={onInputKeyDown}
               onSearchIconClick={onSearchIconClick}
             />
+            <LookupDropdown
+              portalClassName={containerClassNames}
+              opened={opened}
+              loading={loading}
+              listboxId={listboxId}
+              dropdownRef={dropdownRef}
+              listHeader={listHeader}
+              listHeaderIdSeed={listHeaderIdSeed}
+              listFooter={listFooter}
+              listFooterIdSeed={listFooterIdSeed}
+              filteredData={filteredData}
+              focusedValue={focusedValue}
+              getOptionId={getOptionId}
+              onOptionClick={onOptionClick}
+              onOptionFocus={onOptionFocus}
+              onBlur={onInputBlur}
+              onKeyDown={onInputKeyDown}
+            />
           </div>
-          <LookupDropdown
-            portalClassName={containerClassNames}
-            opened={opened}
-            loading={loading}
-            listboxId={listboxId}
-            dropdownRef={dropdownRef}
-            listHeader={listHeader}
-            listHeaderIdSeed={listHeaderIdSeed}
-            listFooter={listFooter}
-            listFooterIdSeed={listFooterIdSeed}
-            filteredData={filteredData}
-            focusedValue={focusedValue}
-            getOptionId={getOptionId}
-            onOptionClick={onOptionClick}
-            onOptionFocus={onOptionFocus}
-            onBlur={onInputBlur}
-            onKeyDown={onInputKeyDown}
-          />
         </div>
       </FormElement>
     );

src/scripts/Picklist.tsx

@@ -607,39 +607,39 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 textColor='default'
               />
             </div>
-          </div>
-          {opened && (
-            <AutoAlign
-              triggerSelector='.react-slds-picklist'
-              alignmentStyle='menu'
-              portalClassName={containerClassNames}
-              portalStyle={menuStyle}
-              size={menuSize}
-            >
-              {({ autoAlignContentRef }) => (
-                <div
-                  id={listboxId}
-                  className={dropdownClassNames}
-                  role='listbox'
-                  aria-label='Options'
-                  tabIndex={0}
-                  aria-busy={false}
-                  ref={useMergeRefs([dropdownRef, autoAlignContentRef])}
-                >
-                  <ul
-                    className='slds-listbox slds-listbox_vertical'
-                    role='presentation'
-                    onKeyDown={onKeyDown}
-                    onBlur={onBlur}
+            {opened && (
+              <AutoAlign
+                triggerSelector='.react-slds-picklist'
+                alignmentStyle='menu'
+                portalClassName={containerClassNames}
+                size={menuSize}
+              >
+                {({ autoAlignContentRef }) => (
+                  <div
+                    id={listboxId}
+                    className={dropdownClassNames}
+                    role='listbox'
+                    aria-label='Options'
+                    tabIndex={0}
+                    aria-busy={false}
+                    ref={useMergeRefs([dropdownRef, autoAlignContentRef])}
+                    style={menuStyle}
                   >
-                    <PicklistContext.Provider value={contextValue}>
-                      {children}
-                    </PicklistContext.Provider>
-                  </ul>
-                </div>
-              )}
-            </AutoAlign>
-          )}
+                    <ul
+                      className='slds-listbox slds-listbox_vertical'
+                      role='presentation'
+                      onKeyDown={onKeyDown}
+                      onBlur={onBlur}
+                    >
+                      <PicklistContext.Provider value={contextValue}>
+                        {children}
+                      </PicklistContext.Provider>
+                    </ul>
+                  </div>
+                )}
+              </AutoAlign>
+            )}
+          </div>
         </div>
       </FormElement>
     );