add onOpenChange to all dropdown and selects (#31230)

* add onOpenChange to all dropdown and selects

fixes: #31166
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* fixed test

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/cypress/e2e/client_scopes_test.spec.ts

@@ -192,9 +192,11 @@ describe("Client Scopes test", () => {
         .checkDropdownItemIsDisabled("Delete")
         .clickItemCheckbox(itemName)
         .checkInSearchBarChangeTypeToButtonIsDisabled(false)
+        .clickSearchBarActionButton()
         .checkDropdownItemIsDisabled("Delete", false)
         .clickItemCheckbox(itemName)
         .checkInSearchBarChangeTypeToButtonIsDisabled()
+        .clickSearchBarActionButton()
         .checkDropdownItemIsDisabled("Delete");
     });
 

js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx

@@ -49,6 +49,7 @@ export const AddFlowDropdown = ({
             position: "right",
           }}
           isOpen={open}
+          onOpenChange={(isOpen) => setOpen(isOpen)}
           toggle={(ref) => (
             <MenuToggle
               ref={ref}

js/apps/admin-ui/src/client-scopes/ChangeTypeDropdown.tsx

@@ -38,6 +38,7 @@ export const ChangeTypeDropdown = ({
   return (
     <Select
       aria-label="change-type-to"
+      onOpenChange={(isOpen) => setOpen(isOpen)}
       isOpen={open}
       toggle={(ref) => (
         <MenuToggle

js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx

@@ -257,6 +257,7 @@ export default function ClientScopesSection() {
               <ToolbarItem>
                 <Dropdown
                   shouldFocusToggleOnSelect
+                  onOpenChange={(isOpen) => setKebabOpen(isOpen)}
                   toggle={(ref) => (
                     <MenuToggle
                       data-testid="kebab"

js/apps/admin-ui/src/client-scopes/details/MapperList.tsx

@@ -114,6 +114,7 @@ export const MapperList = ({
         toolbarItem={
           <Dropdown
             onSelect={() => setMapperAction(false)}
+            onOpenChange={(isOpen) => setMapperAction(isOpen)}
             toggle={(ref) => (
               <MenuToggle
                 ref={ref}

js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx

@@ -72,6 +72,7 @@ export const SearchDropdown = ({
 
   return (
     <Dropdown
+      onOpenChange={(isOpen) => setSearchToggle(isOpen)}
       toggle={(ref) => (
         <MenuToggle
           data-testid="clientScopeSearch"

js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx

@@ -174,6 +174,7 @@ export const AdvancedSettings = ({
                     </MenuToggle>
                   )}
                   isOpen={open}
+                  onOpenChange={(isOpen) => setOpen(isOpen)}
                   onSelect={(_, value) => {
                     field.onChange(value);
                     setOpen(false);

js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx

@@ -71,6 +71,7 @@ export const TokenLifespan = ({
                   </MenuToggle>
                 )}
                 isOpen={open}
+                onOpenChange={(isOpen) => setOpen(isOpen)}
                 onSelect={(_, value) => {
                   field.onChange(value);
                   setOpen(false);

js/apps/admin-ui/src/clients/authorization/Permissions.tsx

@@ -208,6 +208,7 @@ export const AuthorizationPermissions = ({
               </ToolbarItem>
               <ToolbarItem>
                 <Dropdown
+                  onOpenChange={toggleCreate}
                   toggle={(ref) => (
                     <MenuToggle
                       ref={ref}

js/apps/admin-ui/src/clients/authorization/SearchDropdown.tsx

@@ -55,6 +55,7 @@ export const SearchDropdown = ({
 
   return (
     <Dropdown
+      onOpenChange={toggle}
       toggle={(ref) => (
         <MenuToggle
           data-testid="searchdropdown_dorpdown"

js/apps/admin-ui/src/clients/scopes/AddScopeDialog.tsx

@@ -169,6 +169,7 @@ export const AddScopeDialog = ({
                 popperProps={{
                   direction: "up",
                 }}
+                onOpenChange={(isOpen) => setAddToggle(isOpen)}
                 className="keycloak__client-scopes-add__add-dropdown"
                 key="add-dropdown"
                 isOpen={addToggle}
@@ -215,6 +216,7 @@ export const AddScopeDialog = ({
             onSelect={() => {
               onFilterTypeDropdownSelect(filterType);
             }}
+            onOpenChange={toggleIsFilterTypeDropdownOpen}
             toggle={(ref) => (
               <MenuToggle
                 ref={ref}
@@ -246,6 +248,7 @@ export const AddScopeDialog = ({
                 onSelect={() => {
                   onFilterTypeDropdownSelect(filterType);
                 }}
+                onOpenChange={toggleIsFilterTypeDropdownOpen}
                 data-testid="filter-type-dropdown"
                 toggle={(ref) => (
                   <MenuToggle

js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx

@@ -298,6 +298,7 @@ export const ClientScopes = ({
                 </ToolbarItem>
                 <ToolbarItem>
                   <Dropdown
+                    onOpenChange={(isOpen) => setKebabOpen(isOpen)}
                     toggle={(ref) => (
                       <MenuToggle
                         data-testid="kebab"

js/apps/admin-ui/src/components/client-scope/ClientScopeTypes.tsx

@@ -86,6 +86,7 @@ export const CellDropdown = ({
         </MenuToggle>
       )}
       isOpen={open}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
       selected={[type]}
       onSelect={(_, value) => {
         onSelect(

js/apps/admin-ui/src/components/download-dialog/DownloadDialog.tsx

@@ -125,6 +125,7 @@ export const DownloadDialog = ({
             >
               <Select
                 isOpen={openType}
+                onOpenChange={(isOpen) => setOpenType(isOpen)}
                 toggle={(ref) => (
                   <MenuToggle
                     id="type"

js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx

@@ -62,6 +62,7 @@ export const HelpHeader = () => {
       popperProps={{
         position: "right",
       }}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
       isOpen={open}
       toggle={(ref) => (
         <MenuToggle

js/apps/admin-ui/src/components/keycloak-card/KeycloakCard.tsx

@@ -50,6 +50,7 @@ export const KeycloakCard = ({
               popperProps={{
                 position: "right",
               }}
+              onOpenChange={onDropdownToggle}
               toggle={(ref: React.Ref<MenuToggleElement>) => (
                 <MenuToggle
                   ref={ref}

js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx

@@ -162,6 +162,7 @@ export const RealmSelector = () => {
       id="realm-select"
       className="keycloak__realm_selector__dropdown"
       isOpen={open}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
       toggle={(ref) => (
         <MenuToggle
           ref={ref}

js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx

@@ -144,6 +144,7 @@ export const AddRoleMappingModal = ({
           canViewRealmRoles && (
             <ToolbarItem>
               <Dropdown
+                onOpenChange={(isOpen) => setSearchToggle(isOpen)}
                 onSelect={() => {
                   setFilterType(filterType === "roles" ? "clients" : "roles");
                   setSearchToggle(false);

js/apps/admin-ui/src/components/users/UserDataTableToolbarItems.tsx

@@ -169,6 +169,7 @@ export function UserDataTableToolbarItems({
   ) : (
     <ToolbarItem>
       <Dropdown
+        onOpenChange={(isOpen) => setKebabOpen(isOpen)}
         toggle={(ref) => (
           <MenuToggle
             ref={ref}

js/apps/admin-ui/src/components/users/UserSelect.tsx

@@ -110,6 +110,7 @@ export const UserSelect = ({
         render={({ field }) => (
           <Select
             id={name!}
+            onOpenChange={toggleOpen}
             toggle={(ref) => (
               <MenuToggle
                 data-testid={name!}

js/apps/admin-ui/src/components/view-header/ViewHeader.tsx

@@ -152,6 +152,7 @@ export const ViewHeader = ({
                       popperProps={{
                         position: "right",
                       }}
+                      onOpenChange={onDropdownToggle}
                       toggle={(ref) => (
                         <MenuToggle
                           ref={ref}
@@ -195,6 +196,7 @@ export const ViewHeader = ({
         {lowerDropdownItems && (
           <Dropdown
             className="keycloak__user-federation__dropdown"
+            onOpenChange={onLowerDropdownToggle}
             toggle={(ref) => (
               <MenuToggle
                 ref={ref}

js/apps/admin-ui/src/groups/Members.tsx

@@ -213,6 +213,7 @@ export const Members = () => {
               </ToolbarItem>
               <ToolbarItem>
                 <Dropdown
+                  onOpenChange={(isOpen) => setIsKebabOpen(isOpen)}
                   toggle={(ref) => (
                     <MenuToggle
                       ref={ref}

js/apps/admin-ui/src/groups/components/GroupToolbar.tsx

@@ -45,6 +45,7 @@ export const GroupToolbar = ({
       </ToolbarItem>
       <ToolbarItem>
         <Dropdown
+          onOpenChange={toggleKebab}
           toggle={(ref) => (
             <MenuToggle
               ref={ref}

js/apps/admin-ui/src/groups/components/GroupTree.tsx

@@ -107,6 +107,7 @@ const GroupTreeContextMenu = ({
         popperProps={{
           position: "right",
         }}
+        onOpenChange={toggleOpen}
         toggle={(ref) => (
           <MenuToggle
             ref={ref}

js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx

@@ -251,6 +251,7 @@ export default function IdentityProvidersSection() {
                 <ToolbarItem>
                   <Dropdown
                     data-testid="addProviderDropdown"
+                    onOpenChange={(isOpen) => setAddProviderOpen(isOpen)}
                     toggle={(ref) => (
                       <MenuToggle
                         ref={ref}

js/apps/admin-ui/src/organizations/IdentityProviderSelect.tsx

@@ -120,6 +120,7 @@ export const IdentityProviderSelect = ({
         render={({ field }) => (
           <Select
             id={name!}
+            onOpenChange={toggleOpen}
             toggle={(ref) => (
               <MenuToggle
                 data-testid={name!}

js/apps/admin-ui/src/organizations/Members.tsx

@@ -111,6 +111,7 @@ export const Members = () => {
           <>
             <ToolbarItem>
               <Dropdown
+                onOpenChange={toggle}
                 toggle={(ref) => (
                   <MenuToggle
                     ref={ref}

js/apps/admin-ui/src/realm-settings/DefaultGroupsTab.tsx

@@ -172,6 +172,7 @@ export const DefaultsGroupsTab = () => {
             </ToolbarItem>
             <ToolbarItem>
               <Dropdown
+                onOpenChange={toggleKebab}
                 toggle={(ref) => (
                   <MenuToggle
                     ref={ref}

js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx

@@ -384,6 +384,7 @@ export const RealmOverrides = ({
             </Button>
             <ToolbarItem>
               <Dropdown
+                onOpenChange={(isOpen) => setKebabOpen(isOpen)}
                 toggle={(ref) => (
                   <MenuToggle
                     ref={ref}

js/apps/admin-ui/src/user/details/SearchFilter.tsx

@@ -43,6 +43,7 @@ export const SearchDropdown = ({
   return (
     <Dropdown
       className="keycloak__users__searchtype"
+      onOpenChange={(isOpen) => setSearchToggle(isOpen)}
       toggle={(ref) => (
         <MenuToggle
           ref={ref}

js/apps/admin-ui/src/user/user-credentials/CredentialRow.tsx

@@ -94,6 +94,7 @@ export const CredentialRow = ({
           popperProps={{
             position: "right",
           }}
+          onOpenChange={toggleKebab}
           toggle={(ref) => (
             <MenuToggle
               ref={ref}

js/libs/ui-shared/src/masthead/KeycloakDropdown.tsx

@@ -28,6 +28,7 @@ export const KeycloakDropdown = ({
       popperProps={{
         position: "right",
       }}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
       toggle={(ref) => (
         <MenuToggle
           data-testid={`${rest["data-testid"]}-toggle`}

js/libs/ui-shared/src/select/SingleSelect.tsx

@@ -54,7 +54,7 @@ export const SingleSelect = ({
       }}
       {...props}
       onClick={toggle}
-      onOpenChange={() => setOpen(false)}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
       selected={selections}
       onSelect={(_, value) => {
         onSelect?.(value || "");

js/libs/ui-shared/src/select/TypeaheadSelect.tsx

@@ -113,7 +113,7 @@ export const TypeaheadSelect = ({
     <Select
       {...rest}
       onClick={toggle}
-      onOpenChange={() => onToggle?.(false)}
+      onOpenChange={(isOpen) => onToggle?.(isOpen)}
       onSelect={(_, value) => onSelect?.(value || "")}
       maxMenuHeight={propertyToString(maxHeight)}
       popperProps={{ direction, width: propertyToString(width) }}