Hello !
Situation :
I am currently developing a plugin with the help of @grafana/ui. I initialized the project with this command
npx grafana create plugin@latest
I am using grafana v9.3.8 and the latest grafana ui available.
Problem :
The problem I am facing is that the TimeRangeInput component seems broken and not interactable. Let me explain :
-
Here is the component in itself in my project
-
Here is the component when I click on the agenda and it opens the calendar (i can’t interact with it)
-
Here is the calendar in the responsive mode on a small screen (it works)
So to summarize, I can’t interact with the calendar component in the TimeRangeInput, unless it is in responsive mode.
What i have tried :
I tried to set the “isReversed” option to false, I can see the calendar better, but it is still not interactable.
At first I thought the issue came from my own css file, but I tried to delete my whole css, refreshed the plugin (without any cache) and it still didn’t work.
The code i am using is litteraly the one used in the Grafana storybook, and the value types are correct.
https://developers.grafana.com/ui/latest/index.html?path=/story/pickers-and-editors-timepickers-timerangeinput--basic
My code:
<TimeRangeInput
value={getTimeRange(index)}
onChange={(v) => {
setTimeRange(dateTime(v.from), dateTime(v.to), index);
}}
isReversed={false}
clearable={true}
/>
It is also important to note that I CAN interact with the quick ranges and everything works fine from this point of view, but the calendar date picker doesn’t work unless in responsive mode.
Any help is appreciated, thanks for your time !