Closed hodanoori closed 2 months ago
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,p:~Htesting))):
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>
)
}
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.