React datepicker in Filter

Grocery CRUD Enterprise
1

Hi,

We are trying to use GCE version 3.0.2. We have encountered something strange during the first load. When trying to filter a date-typed column, it turns out that the picker is not working correctly (it looks like the library is not loaded). However, after using the Add or Edit form, which loads the library along with the form for the date field, the filter works correctly.

Is this a bug?

obraz
obraz1161Ă—348 10.7 KB

obraz
obraz1147Ă—463 15.1 KB

2

Hello there @ric

Have you tried checking the “Inspect Element” if there are any errors?

3

Hi @larasmith,

There are no console errors, but after looking a bit further, it seems that only the CSS is not being loaded. This issue seems to occur only under specific circumstances, I assume.

For instance, when I apply some filters (via a modal) and reload the page without a cache, the picker from the date field appears unstyled when checking the filters in the modal.

I believe that I just have encountered a rare situation that might not happen too often.

2 Likes
4

Hello @ric ,

I was finally able to reproduce the issue that you had and indeed it was an edge case scenario. I can have the steps to reproduce here:

  • Step 1. Load the page and go into the columns section and hide all the columns that has date or datetime field
  • Step 2. Now refresh the page
  • Step 3. Go to the “Filters” button and try searching by this field. You can see that now the field is unstyled.

To be honest, I haven’t even thought that this is possible :sweat_smile:

In short, because Grocery CRUD is loading the third-party libraries such as React datepicker only if it is loaded just to not have a full load of CSS without the actual need.

As a work-around, as you said you can either click add or edit form or unhide the date field from the datagrid.

I will try to fix this issue for the next release. Thank you for pointing that out. I will keep you updated on this one.

Regards
Johnny

5

I am glad to announce you that this issue is now fixed on the latest Enterprise version 3.0.3 :grinning:

Regards
Johnny