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>
This commit is contained in:
parent
5db3772d45
commit
b5597c6293
34 changed files with 38 additions and 2 deletions
|
@ -192,9 +192,11 @@ describe("Client Scopes test", () => {
|
|||
.checkDropdownItemIsDisabled("Delete")
|
||||
.clickItemCheckbox(itemName)
|
||||
.checkInSearchBarChangeTypeToButtonIsDisabled(false)
|
||||
.clickSearchBarActionButton()
|
||||
.checkDropdownItemIsDisabled("Delete", false)
|
||||
.clickItemCheckbox(itemName)
|
||||
.checkInSearchBarChangeTypeToButtonIsDisabled()
|
||||
.clickSearchBarActionButton()
|
||||
.checkDropdownItemIsDisabled("Delete");
|
||||
});
|
||||
|
||||
|
|
|
@ -49,6 +49,7 @@ export const AddFlowDropdown = ({
|
|||
position: "right",
|
||||
}}
|
||||
isOpen={open}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -38,6 +38,7 @@ export const ChangeTypeDropdown = ({
|
|||
return (
|
||||
<Select
|
||||
aria-label="change-type-to"
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
isOpen={open}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
|
|
|
@ -257,6 +257,7 @@ export default function ClientScopesSection() {
|
|||
<ToolbarItem>
|
||||
<Dropdown
|
||||
shouldFocusToggleOnSelect
|
||||
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid="kebab"
|
||||
|
|
|
@ -114,6 +114,7 @@ export const MapperList = ({
|
|||
toolbarItem={
|
||||
<Dropdown
|
||||
onSelect={() => setMapperAction(false)}
|
||||
onOpenChange={(isOpen) => setMapperAction(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -72,6 +72,7 @@ export const SearchDropdown = ({
|
|||
|
||||
return (
|
||||
<Dropdown
|
||||
onOpenChange={(isOpen) => setSearchToggle(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid="clientScopeSearch"
|
||||
|
|
|
@ -174,6 +174,7 @@ export const AdvancedSettings = ({
|
|||
</MenuToggle>
|
||||
)}
|
||||
isOpen={open}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
onSelect={(_, value) => {
|
||||
field.onChange(value);
|
||||
setOpen(false);
|
||||
|
|
|
@ -71,6 +71,7 @@ export const TokenLifespan = ({
|
|||
</MenuToggle>
|
||||
)}
|
||||
isOpen={open}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
onSelect={(_, value) => {
|
||||
field.onChange(value);
|
||||
setOpen(false);
|
||||
|
|
|
@ -208,6 +208,7 @@ export const AuthorizationPermissions = ({
|
|||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={toggleCreate}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -55,6 +55,7 @@ export const SearchDropdown = ({
|
|||
|
||||
return (
|
||||
<Dropdown
|
||||
onOpenChange={toggle}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid="searchdropdown_dorpdown"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -298,6 +298,7 @@ export const ClientScopes = ({
|
|||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid="kebab"
|
||||
|
|
|
@ -86,6 +86,7 @@ export const CellDropdown = ({
|
|||
</MenuToggle>
|
||||
)}
|
||||
isOpen={open}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
selected={[type]}
|
||||
onSelect={(_, value) => {
|
||||
onSelect(
|
||||
|
|
|
@ -125,6 +125,7 @@ export const DownloadDialog = ({
|
|||
>
|
||||
<Select
|
||||
isOpen={openType}
|
||||
onOpenChange={(isOpen) => setOpenType(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
id="type"
|
||||
|
|
|
@ -62,6 +62,7 @@ export const HelpHeader = () => {
|
|||
popperProps={{
|
||||
position: "right",
|
||||
}}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
isOpen={open}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
|
|
|
@ -50,6 +50,7 @@ export const KeycloakCard = ({
|
|||
popperProps={{
|
||||
position: "right",
|
||||
}}
|
||||
onOpenChange={onDropdownToggle}
|
||||
toggle={(ref: React.Ref<MenuToggleElement>) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -144,6 +144,7 @@ export const AddRoleMappingModal = ({
|
|||
canViewRealmRoles && (
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={(isOpen) => setSearchToggle(isOpen)}
|
||||
onSelect={() => {
|
||||
setFilterType(filterType === "roles" ? "clients" : "roles");
|
||||
setSearchToggle(false);
|
||||
|
|
|
@ -169,6 +169,7 @@ export function UserDataTableToolbarItems({
|
|||
) : (
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -110,6 +110,7 @@ export const UserSelect = ({
|
|||
render={({ field }) => (
|
||||
<Select
|
||||
id={name!}
|
||||
onOpenChange={toggleOpen}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid={name!}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -213,6 +213,7 @@ export const Members = () => {
|
|||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={(isOpen) => setIsKebabOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -45,6 +45,7 @@ export const GroupToolbar = ({
|
|||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={toggleKebab}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -107,6 +107,7 @@ const GroupTreeContextMenu = ({
|
|||
popperProps={{
|
||||
position: "right",
|
||||
}}
|
||||
onOpenChange={toggleOpen}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -251,6 +251,7 @@ export default function IdentityProvidersSection() {
|
|||
<ToolbarItem>
|
||||
<Dropdown
|
||||
data-testid="addProviderDropdown"
|
||||
onOpenChange={(isOpen) => setAddProviderOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -120,6 +120,7 @@ export const IdentityProviderSelect = ({
|
|||
render={({ field }) => (
|
||||
<Select
|
||||
id={name!}
|
||||
onOpenChange={toggleOpen}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid={name!}
|
||||
|
|
|
@ -111,6 +111,7 @@ export const Members = () => {
|
|||
<>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={toggle}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -172,6 +172,7 @@ export const DefaultsGroupsTab = () => {
|
|||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={toggleKebab}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -384,6 +384,7 @@ export const RealmOverrides = ({
|
|||
</Button>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -43,6 +43,7 @@ export const SearchDropdown = ({
|
|||
return (
|
||||
<Dropdown
|
||||
className="keycloak__users__searchtype"
|
||||
onOpenChange={(isOpen) => setSearchToggle(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -94,6 +94,7 @@ export const CredentialRow = ({
|
|||
popperProps={{
|
||||
position: "right",
|
||||
}}
|
||||
onOpenChange={toggleKebab}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
|
|
|
@ -28,6 +28,7 @@ export const KeycloakDropdown = ({
|
|||
popperProps={{
|
||||
position: "right",
|
||||
}}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
toggle={(ref) => (
|
||||
<MenuToggle
|
||||
data-testid={`${rest["data-testid"]}-toggle`}
|
||||
|
|
|
@ -54,7 +54,7 @@ export const SingleSelect = ({
|
|||
}}
|
||||
{...props}
|
||||
onClick={toggle}
|
||||
onOpenChange={() => setOpen(false)}
|
||||
onOpenChange={(isOpen) => setOpen(isOpen)}
|
||||
selected={selections}
|
||||
onSelect={(_, value) => {
|
||||
onSelect?.(value || "");
|
||||
|
|
|
@ -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) }}
|
||||
|
|
Loading…
Reference in a new issue