feat: add new mui formik color picker component #231
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React, { useEffect, useRef, useState } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { TextField } from "@mui/material"; | ||
| import { useField } from "formik"; | ||
| import { DEBOUNCE_WAIT_150 } from "../../../utils/constants"; | ||
|
|
||
| const MuiFormikColorInput = ({ name, ...rest }) => { | ||
| const [field, meta, helpers] = useField(name); | ||
| const [localValue, setLocalValue] = useState(field.value || "#000000"); | ||
|
coderabbitai[bot] marked this conversation as resolved.
Collaborator
There was a problem hiding this comment. [HIGH] Default
Suggested fix: also seed Formik on mount when useEffect(() => { if (!field.value) helpers.setValue("#000000"); }, []);or render the swatch only when
Contributor
Author
There was a problem hiding this comment. The color picker would pick a default color if the user don't interact with the component. It looks like this contradicts #231 (comment). |
||
| const debounceRef = useRef(null); | ||
|
Collaborator
There was a problem hiding this comment. [MEDIUM] No re-sync with external
Suggested fix: useEffect(() => {
if (field.value !== localValue) setLocalValue(field.value || "#000000");
}, [field.value]);(guard against overwriting in-flight typing if needed.) [LOW] No debounce cleanup on unmount. A pending useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current); }, []); |
||
|
|
||
| useEffect(() => { | ||
| if (field.value !== localValue) setLocalValue(field.value || "#000000"); | ||
| }, [field.value]); | ||
|
|
||
| useEffect(() => () => { | ||
| if (!field.value) helpers.setValue("#000000"); | ||
| if (debounceRef.current) clearTimeout(debounceRef.current); | ||
| }, []); | ||
|
Comment on lines
+16
to
+19
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: cat -n src/components/mui/formik-inputs/mui-formik-color-input.jsRepository: OpenStackweb/openstack-uicore-foundation Length of output: 2319 Remove Formik writes from unmount cleanup (stale-value side effect). On line 17, the cleanup callback captures The debounce timeout cleanup on line 18 is necessary and should remain, but the conditional write is redundant— Proposed fix- useEffect(() => () => {
- if (!field.value) helpers.setValue("#000000");
- if (debounceRef.current) clearTimeout(debounceRef.current);
- }, []);
+ useEffect(
+ () => () => {
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ },
+ []
+ );🤖 Prompt for AI Agents |
||
|
|
||
| const handleChange = (e) => { | ||
| const value = e.target.value; | ||
| setLocalValue(value); | ||
| if (debounceRef.current) clearTimeout(debounceRef.current); | ||
| debounceRef.current = setTimeout(() => { | ||
| helpers.setValue(value); | ||
| debounceRef.current = null; | ||
| }, DEBOUNCE_WAIT_150); | ||
| }; | ||
|
|
||
| const handleBlur = (e) => { | ||
| field.onBlur(e); | ||
| helpers.setTouched(true); | ||
| if (debounceRef.current) { | ||
| clearTimeout(debounceRef.current); | ||
| debounceRef.current = null; | ||
| helpers.setValue(localValue); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <TextField | ||
| type="color" | ||
| name={field.name} | ||
| value={localValue} | ||
| onChange={handleChange} | ||
| onBlur={handleBlur} | ||
|
tomrndom marked this conversation as resolved.
|
||
| error={meta.touched && Boolean(meta.error)} | ||
| helperText={meta.touched && meta.error} | ||
| fullWidth | ||
| sx={{ | ||
| "& input[type='color']::-webkit-color-swatch-wrapper": { | ||
| padding: "2px" | ||
| } | ||
| }} | ||
| {...rest} | ||
| /> | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
| ); | ||
| }; | ||
|
|
||
| MuiFormikColorInput.propTypes = { | ||
| name: PropTypes.string.isRequired | ||
| }; | ||
|
|
||
| export default MuiFormikColorInput; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[MEDIUM] Pre-existing
multiplevsisMultidual-prop divergence (worth fixing while editing this file).multiple(defaultfalse, line 35) drives thehandleChangevalue-shape branch (single vs array).multiple={isMulti}(further down) is what's passed to MUIAutocomplete.A consumer passing only
isMulti={true}(withoutmultiple={true}) gets multi-select UI with single-value Formik writes → array/object collisions on submit. The newpropTypesblock cements this two-name API into the public surface.Suggested fix: collapse to one prop (
multiple), or alias one to the other in destructuring (multiple = isMulti), and update propTypes accordingly.