mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix empty value and close combobox input on select (#7590)

Browse Source
This commit is contained in:
James Gatz 2024-06-26 11:03:18 +02:00 committed by GitHub
parent e410998552
commit aaabdfdd79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 69 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/insomnia/src/ui/components/environment-picker.tsx
View File

@ -1,5 +1,5 @@
import { IconName } from '@fortawesome/fontawesome-svg-core';
import React, { Fragment } from 'react';
import React, { Fragment, useRef } from 'react';
import { Button, ComboBox, Dialog, DialogTrigger, Heading, Input, ListBox, ListBoxItem, Popover } from 'react-aria-components';
import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
@ -50,6 +50,8 @@ export const EnvironmentPicker = ({
const navigate = useNavigate();
const globalEnvironmentListBox = useRef<HTMLDivElement>(null);
return (
<DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
<Button className="py-1 px-4 max-w-full gap-2 truncate flex items-center justify-center aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
@ -72,25 +74,6 @@ export const EnvironmentPicker = ({
key={activeEnvironment._id}
items={collectionEnvironmentList}
disabledKeys={selectedEnvironments.map(e => e.id)}
// disallowEmptySelection
// onSelectionChange={selection => {
// if (selection === 'all') {
// return;
// }
// const environmentId = selection.values().next().value;
// setActiveEnvironmentFetcher.submit(
// {
// environmentId,
// },
// {
// method: 'POST',
// action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`,
// }
// );
// }}
// selectedKeys={[activeEnvironment._id || '']}
onAction={environmentId => {
setActiveEnvironmentFetcher.submit(
{
@ -149,9 +132,11 @@ export const EnvironmentPicker = ({
</Button>
)}
</Heading>
<div>
<ComboBox
aria-label='Global Environment'
shouldFocusWrap
key={activeGlobalBaseEnvironment?._id}
allowsCustomValue={false}
menuTrigger='focus'
defaultFilter={(textValue, filter) => {
@ -164,7 +149,7 @@ export const EnvironmentPicker = ({
return match;
}}
onSelectionChange={environmentId => {
if (environmentId === 'all' || !environmentId) {
if (environmentId === 'all' || environmentId === null) {
return;
}
@ -177,8 +162,10 @@ export const EnvironmentPicker = ({
action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`,
}
);
globalEnvironmentListBox.current?.focus();
}}
inputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || ''}
defaultInputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || ''}
selectedKey={selectedGlobalBaseEnvironmentId}
defaultItems={[...globalBaseEnvironments.map(baseEnv => {
return {
@ -211,9 +198,11 @@ export const EnvironmentPicker = ({
</ListBox>
</Popover>
</ComboBox>
</div>
<ListBox
aria-label='Select a Global Environment'
selectionMode='none'
ref={globalEnvironmentListBox}
disallowEmptySelection
key={activeGlobalEnvironment?._id}
items={globalEnvironmentList}