djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clear values on blur for attribute selects

Browse source
This commit is contained in:
sektordv 2021-08-11 16:38:44 +02:00
parent 11bead49c4
commit bb890fa5f0
21 changed files with 76 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Attributes/AttributeRow.tsx
View file

@ -73,6 +73,7 @@ interface AttributeRowProps extends AttributeRowHandlers {
error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
loading: boolean;
entityId: string;
onAttributeSelectBlur?: () => void;
}
const AttributeRow: React.FC<AttributeRowProps> = ({
@ -89,7 +90,8 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
onChange,
fetchAttributeValues,
fetchMoreAttributeValues,
entityId
entityId,
onAttributeSelectBlur
}) => {
const intl = useIntl();
const classes = useStyles({});
@ -156,6 +158,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
allowCustomValues={true}
fetchOnFocus={true}
fetchChoices={value => fetchAttributeValues(value, attribute.id)}
onBlur={onAttributeSelectBlur}
{...fetchMoreAttributeValues}
/>
</BasicAttributeRow>
@ -268,6 +271,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
allowCustomValues={true}
fetchOnFocus={true}
fetchChoices={value => fetchAttributeValues(value, attribute.id)}
onBlur={onAttributeSelectBlur}
{...fetchMoreAttributeValues}
/>
</BasicAttributeRow>

3
src/components/Attributes/Attributes.stories.tsx
View file

@ -19,7 +19,8 @@ const props: AttributesProps = {
onReferencesRemove: () => undefined,
onReferencesReorder: () => undefined,
fetchAttributeValues: () => undefined,
fetchMoreAttributeValues: fetchMoreProps
fetchMoreAttributeValues: fetchMoreProps,
onAttributeSelectBlur: () => undefined
};
storiesOf("Attributes / Attributes", module)

3
src/components/Attributes/Attributes.tsx
View file

@ -38,6 +38,7 @@ export interface AttributesProps extends AttributeRowHandlers {
attributeValues: AttributeValueFragment[];
fetchAttributeValues: (query: string, attributeId: string) => void;
fetchMoreAttributeValues: FetchMoreProps;
onAttributeSelectBlur: () => void;
disabled: boolean;
loading: boolean;
errors: Array<
@ -117,6 +118,7 @@ const Attributes: React.FC<AttributesProps> = ({
attributeValues,
errors,
title,
onAttributeSelectBlur,
entityId = "_defaultId",
...props
}) => {
@ -168,6 +170,7 @@ const Attributes: React.FC<AttributesProps> = ({
attribute={attribute}
attributeValues={attributeValues}
error={error}
onAttributeSelectBlur={onAttributeSelectBlur}
{...props}
/>
</React.Fragment>

11
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -49,6 +49,7 @@ export interface SingleAutocompleteSelectFieldProps
fetchOnFocus?: boolean;
FormHelperTextProps?: ExtendedFormHelperTextProps;
nakedInput?: boolean;
onBlur?: () => void;
}
const DebounceAutocomplete: React.ComponentType<DebounceProps<
@ -79,6 +80,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
fetchOnFocus,
FormHelperTextProps,
nakedInput = false,
onBlur,
...rest
} = props;
const classes = useStyles(props);
@ -101,6 +103,14 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
onInputValueChange={value => debounceFn(value)}
onSelect={handleChange}
selectedItem={value || ""}
// this is to prevent unwanted state updates when the dropdown is closed with an empty value,
// which downshift interprets as the value being updated with an empty string, causing side-effects
stateReducer={(state, changes) => {
if (changes.isOpen === false && state.inputValue === "") {
delete changes.inputValue;
}
return changes;
}}
>
{({
getInputProps,
@ -150,6 +160,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
const handleBlur = () => {
ensureProperValues(true);
onBlur();
closeMenu();
};

5
src/pages/components/PageDetailsPage/PageDetailsPage.tsx
View file

@ -59,6 +59,7 @@ export interface PageDetailsPageProps {
fetchMoreAttributeValues?: FetchMoreProps;
onCloseDialog: () => void;
onSelectPageType?: (pageTypeId: string) => void;
onAttributeSelectBlur: () => void;
}
const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
@ -85,7 +86,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
fetchAttributeValues,
fetchMoreAttributeValues,
onCloseDialog,
onSelectPageType
onSelectPageType,
onAttributeSelectBlur
}) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
@ -189,6 +191,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
)}
<CardSpacer />

4
src/pages/views/PageCreate.tsx
View file

@ -76,7 +76,8 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const { data: selectedPageType } = usePageTypeQuery({
@ -218,6 +219,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
onCloseDialog={() => navigate(pageCreateUrl())}
selectedPageType={selectedPageType?.pageType}
onSelectPageType={id => setSelectedPageTypeId(id)}
onAttributeSelectBlur={searchAttributeReset}
/>
</>
);

4
src/pages/views/PageDetails.tsx
View file

@ -176,7 +176,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const attributeValues =
@ -237,6 +238,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
fetchAttributeValues={searchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onCloseDialog={() => navigate(pageUrl(id))}
onAttributeSelectBlur={searchAttributeReset}
/>
<ActionDialog
open={params.action === "remove"}

5
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -84,6 +84,7 @@ interface ProductCreatePageProps {
fetchReferenceProducts?: (data: string) => void;
fetchMoreReferencePages?: FetchMoreProps;
fetchMoreReferenceProducts?: FetchMoreProps;
onAttributeSelectBlur: () => void;
onCloseDialog: () => void;
onSelectProductType: (productTypeId: string) => void;
onBack?();
@ -129,7 +130,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
fetchAttributeValues,
fetchMoreAttributeValues,
onCloseDialog,
onSelectProductType
onSelectProductType,
onAttributeSelectBlur
}: ProductCreatePageProps) => {
const intl = useIntl();
@ -240,6 +242,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
)}
<CardSpacer />

1
src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
View file

@ -37,6 +37,7 @@ const props: ProductUpdatePageProps = {
fetchCategories: () => undefined,
fetchCollections: () => undefined,
fetchAttributeValues: () => undefined,
onAttributeSelectBlur: () => undefined,
fetchMoreCategories: fetchMoreProps,
fetchMoreCollections: fetchMoreProps,
fetchMoreAttributeValues: fetchMoreProps,

5
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -110,6 +110,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
onImageDelete: (id: string) => () => void;
onSubmit: (data: ProductUpdatePageSubmitData) => SubmitPromise;
openChannelsModal: () => void;
onAttributeSelectBlur: () => void;
onBack?();
onDelete();
onImageEdit?(id: string);
@ -194,7 +195,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
fetchMoreAttributeValues,
onCloseDialog,
channelsWithVariantsData,
onChannelsChange
onChannelsChange,
onAttributeSelectBlur
}) => {
const intl = useIntl();
@ -317,6 +319,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
)}
<CardSpacer />

6
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -85,6 +85,7 @@ interface ProductVariantCreatePageProps {
fetchMoreReferenceProducts?: FetchMoreProps;
fetchMoreAttributeValues?: FetchMoreProps;
onCloseDialog: () => void;
onAttributeSelectBlur: () => void;
}
const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@ -112,7 +113,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
fetchMoreReferencePages,
fetchMoreReferenceProducts,
fetchMoreAttributeValues,
onCloseDialog
onCloseDialog,
onAttributeSelectBlur
}) => {
const intl = useIntl();
@ -192,6 +194,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<Attributes
@ -213,6 +216,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<ProductShipping

6
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -98,6 +98,7 @@ interface ProductVariantPageProps {
onAssignReferencesClick: (attribute: AttributeInput) => void;
onCloseDialog: () => void;
onVariantReorder: ReorderAction;
onAttributeSelectBlur: () => void;
onAdd();
onBack();
onDelete();
@ -140,7 +141,8 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
fetchMoreReferencePages,
fetchMoreReferenceProducts,
fetchMoreAttributeValues,
onCloseDialog
onCloseDialog,
onAttributeSelectBlur
}) => {
const intl = useIntl();
@ -246,6 +248,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<Attributes
@ -270,6 +273,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<ProductVariantMedia

4
src/products/views/ProductCreate/ProductCreate.tsx
View file

@ -109,7 +109,8 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const warehouses = useWarehouseList({
displayLoader: true,
@ -348,6 +349,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
onCloseDialog={() => navigate(productAddUrl())}
selectedProductType={selectedProductType?.productType}
onSelectProductType={id => setSelectedProductTypeId(id)}
onAttributeSelectBlur={searchAttributeReset}
/>
</>
);

4
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -148,7 +148,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const warehouses = useWarehouseList({
displayLoader: true,
@ -606,6 +607,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
fetchMoreReferenceProducts={fetchMoreReferenceProducts}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onCloseDialog={() => navigate(productUrl(id))}
onAttributeSelectBlur={searchAttributeReset}
/>
<ActionDialog
open={params.action === "remove"}

4
src/products/views/ProductVariant.tsx
View file

@ -303,7 +303,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const fetchMoreReferencePages = {
@ -376,6 +377,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
onCloseDialog={() =>
navigate(productVariantEditUrl(productId, variantId))
}
onAttributeSelectBlur={searchAttributeReset}
/>
<ProductVariantDeleteDialog
confirmButtonState={deleteVariantOpts.status}

4
src/products/views/ProductVariantCreate.tsx
View file

@ -171,7 +171,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const fetchMoreReferencePages = {
@ -241,6 +242,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
fetchAttributeValues={searchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onCloseDialog={() => navigate(productVariantAddUrl(productId))}
onAttributeSelectBlur={searchAttributeReset}
/>
</>
);

1
src/storybook/stories/pages/PageDetailsPage.tsx
View file

@ -24,6 +24,7 @@ const props: PageDetailsPageProps = {
attributeValues: [],
saveButtonBarState: "default",
fetchAttributeValues: () => undefined,
onAttributeSelectBlur: () => undefined,
fetchMoreAttributeValues: fetchMoreProps
};

3
src/storybook/stories/products/ProductCreatePage.tsx
View file

@ -56,6 +56,7 @@ storiesOf("Views / Products / Create product", module)
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onSelectProductType={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("When loading", () => (
@ -92,6 +93,7 @@ storiesOf("Views / Products / Create product", module)
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onSelectProductType={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("form errors", () => (
@ -143,5 +145,6 @@ storiesOf("Views / Products / Create product", module)
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onSelectProductType={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
));

1
src/storybook/stories/products/ProductUpdatePage.tsx
View file

@ -48,6 +48,7 @@ const props: ProductUpdatePageProps = {
fetchCategories: () => undefined,
fetchCollections: () => undefined,
fetchAttributeValues: () => undefined,
onAttributeSelectBlur: () => undefined,
fetchMoreCategories: fetchMoreProps,
fetchMoreCollections: fetchMoreProps,
fetchMoreAttributeValues: fetchMoreProps,

5
src/storybook/stories/products/ProductVariantCreatePage.tsx
View file

@ -40,6 +40,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("with errors", () => (
@ -82,6 +83,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("when loading data", () => (
@ -105,6 +107,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("add first variant", () => (
@ -131,6 +134,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("no warehouses", () => (
@ -154,5 +158,6 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
));

4
src/storybook/stories/products/ProductVariantPage.tsx
View file

@ -39,6 +39,7 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("when loading data", () => (
@ -67,6 +68,7 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("no warehouses", () => (
@ -94,6 +96,7 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("attribute errors", () => (
@ -149,5 +152,6 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
));