ColorPicker and Calendar only has access to initial state in F7 React

Questions
1

I’m having a strange situation with ColorPicker and Calendar components, and its onColorPickerChange and onCalendarChange events.

These events seem to only have access to the initial state of variables, so can’t be used to reliably change the state.

I created a small page to reproduce the issue, its quite easy:

    const HomePage = () => {

      const [customer, setCustomer] = useState({ color: '#00ff00', name: '' });

      const onColorPickerChange = (color) => {
        console.log(customer);   //always has the initial state!
        setCustomer({ ...customer, color: color.hex })
      }

      const onCalendarChange = (calendar) => {
        console.log(customer);   //always has the initial state!
      }

      return (
        <Page name="home">
          <Navbar title='F7 Colorpicker'></Navbar>
          <Block strong>
            <p>The onColorPickerChange seems to only have access to the initial state. Same with onCalendarChange.</p>
          </Block>

          <BlockTitle>Test Form</BlockTitle>
          <List noHairlinesMd>
            <ListInput type='text'
              label="Full Name"
              placeholder='Type anything before changing the color or date...'
              value={customer.name}
              onChange={(e) => setCustomer({ ...customer, name: e.target.value })}
            />

            <ListInput
              type="colorpicker"
              label="Color Wheel"
              placeholder="Color"
              readonly
              value={{ hex: customer.color }}
              onColorPickerChange={onColorPickerChange}
            />

            <ListInput
              label="Default setup"
              type="datepicker"
              placeholder="Your birth date"
              readonly
              onCalendarChange={onCalendarChange}
            />
          </List>
        </Page>
      )
    }

How to reproduce

  1. Download and unzip f7-colorpicker-problem.zip - Google Drive
  2. npm start
  3. Open http://localhost:3000/
  4. Type some text in the “Full name” texfield. The state of the customer changes.
  5. Change the color. The attribute “name” changes the its initial state (empty string).
  6. Repeat with the Calendar component, the same happens.

Am I doing something wrong? Thanks for your help!

2

Hello @ldeseta, where you able to find a solution for this issue? I am experiencing the same… :frowning:

3

Just as workaround. I created a state variable just for the colorPicker, and then used an useEffect to perform actions on that value. For instance:

  const [color, setColor] = useState('#000000');


  useEffect(() => {
    setMyObject({...myObject, mainColor: color});
  }, [color]);

  ...

  <ColorPicker value={color} onChange={(value) => setColor(value)} />

Hope that helps!

1 Like