Closes select on selection and truncates list items

This commit is contained in:
Alex Corey
2021-02-10 11:21:32 -05:00
parent 32ddfdf590
commit 17627ed6ce

View File

@@ -8,10 +8,11 @@ import {
Button, Button,
Form, Form,
FormGroup, FormGroup,
Select, Select as PFSelect,
SelectOption, SelectOption as PFSelectOption,
SelectVariant, SelectVariant,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import styled from 'styled-components';
import FormField, { FormSubmitError } from '../../../components/FormField'; import FormField, { FormSubmitError } from '../../../components/FormField';
import { import {
FormColumnLayout, FormColumnLayout,
@@ -22,6 +23,18 @@ import OrganizationLookup from '../../../components/Lookup/OrganizationLookup';
import TypeInputsSubForm from './TypeInputsSubForm'; import TypeInputsSubForm from './TypeInputsSubForm';
import ExternalTestModal from './ExternalTestModal'; import ExternalTestModal from './ExternalTestModal';
const Select = styled(PFSelect)`
ul {
max-width: 495px;
}
`;
const SelectOption = styled(PFSelectOption)`
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
`;
function CredentialFormFields({ i18n, credentialTypes }) { function CredentialFormFields({ i18n, credentialTypes }) {
const { setFieldValue, initialValues, setFieldTouched } = useFormikContext(); const { setFieldValue, initialValues, setFieldTouched } = useFormikContext();
const [isSelectOpen, setIsSelectOpen] = useState(false); const [isSelectOpen, setIsSelectOpen] = useState(false);
@@ -142,11 +155,13 @@ function CredentialFormFields({ i18n, credentialTypes }) {
onSelect={(event, value) => { onSelect={(event, value) => {
credTypeHelpers.setValue(value); credTypeHelpers.setValue(value);
resetSubFormFields(value); resetSubFormFields(value);
setIsSelectOpen(false);
}} }}
selections={credTypeField.value} selections={credTypeField.value}
placeholder={i18n._(t`Select a credential Type`)} placeholder={i18n._(t`Select a credential Type`)}
isCreatable={false} isCreatable={false}
maxHeight="300px" maxHeight="300px"
width="100%"
> >
{credentialTypeOptions.map(credType => ( {credentialTypeOptions.map(credType => (
<SelectOption key={credType.value} value={credType.value}> <SelectOption key={credType.value} value={credType.value}>