[juno-ui-components] DatePicker clicking on calendar icon reopens the panel

[hodanoori]

In the new key manager in Elektra, the DateTimePicker is used within a PanelBody with a Form below it. In this scenario, the calendar opens correctly when I click anywhere except on the calendar icon. However, when I click on the calendar icon, the panel closes and then reopens and this should be fixed.

[TilmanHaupt]

This also happens in my normal Modal in Juno.

I recognized: The Problem is the Form. The complete Page is reloading. Try following in the Playground:

import React, { useEffect, useState } from "react"
import { DateTimePicker, Form } from "juno-ui-components"

export default function App() {

const [testState, setTestState] = useState({
    date: {
      end: null
    },
  }) 
  
  return (
  
 <Form className="mt-6">
              <DateTimePicker
              value={testState?.date?.end}
              dateFormat="Y-m-d H:i"
              label="Select a end date"
              enableTime
              time_24hr
              required
              onChange={(e, f) => {
                console.log("end date as a string:", f)
                setTestState({ ...testState, date: { end: f } })
              }}
            />
 </Form>
  
  )
} 

Versus;

import React, { useEffect, useState } from "react"
import { DateTimePicker, Modal } from "juno-ui-components"

export default function App() {

const [testState, setTestState] = useState({
    date: {
      end: null
    },
  }) 
  
  return (
  
              <Modal
              onCancel={null}
    onConfirm={null}
    open={true}
              >
              <DateTimePicker
              value={testState?.date?.end}
              dateFormat="Y-m-d H:i"
              label="Select a end date"
              enableTime
              time_24hr
              required
              onChange={(e, f) => {
                console.log("end date as a string:", f)
                setTestState({ ...testState, date: { end: f } })
              }}
            />
              </Modal>
  
  )
}