Fix buttons not working correct in number filter (#3177)

This commit is contained in:
WithoutPants
2022-11-24 08:11:40 +11:00
committed by GitHub
parent 03cd9529bd
commit 27998c35a1

View File

@@ -1,4 +1,4 @@
import React, { useRef } from "react"; import React from "react";
import { Form } from "react-bootstrap"; import { Form } from "react-bootstrap";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { CriterionModifier } from "../../../core/generated-graphql"; import { CriterionModifier } from "../../../core/generated-graphql";
@@ -16,18 +16,15 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const valueStage = useRef<INumberValue>(criterion.value);
function onChanged( function onChanged(
event: React.ChangeEvent<HTMLInputElement>, event: React.ChangeEvent<HTMLInputElement>,
property: "value" | "value2" property: "value" | "value2"
) { ) {
const value = parseInt(event.target.value, 10); const numericValue = parseInt(event.target.value, 10);
valueStage.current[property] = !Number.isNaN(value) ? value : 0; const valueCopy = { ...criterion.value };
}
function onBlurInput() { valueCopy[property] = !Number.isNaN(numericValue) ? numericValue : 0;
onValueChanged(valueStage.current); onValueChanged(valueCopy);
} }
let equalsControl: JSX.Element | null = null; let equalsControl: JSX.Element | null = null;
@@ -43,8 +40,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChanged(e, "value") onChanged(e, "value")
} }
onBlur={onBlurInput} value={criterion.value?.value ?? ""}
defaultValue={criterion.value?.value ?? ""}
placeholder={intl.formatMessage({ id: "criterion.value" })} placeholder={intl.formatMessage({ id: "criterion.value" })}
/> />
</Form.Group> </Form.Group>
@@ -65,8 +61,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChanged(e, "value") onChanged(e, "value")
} }
onBlur={onBlurInput} value={criterion.value?.value ?? ""}
defaultValue={criterion.value?.value ?? ""}
placeholder={intl.formatMessage({ id: "criterion.greater_than" })} placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
/> />
</Form.Group> </Form.Group>
@@ -92,8 +87,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
: "value2" : "value2"
) )
} }
onBlur={onBlurInput} value={
defaultValue={
(criterion.modifier === CriterionModifier.LessThan (criterion.modifier === CriterionModifier.LessThan
? criterion.value?.value ? criterion.value?.value
: criterion.value?.value2) ?? "" : criterion.value?.value2) ?? ""