ukrbublik / react-awesome-query-builder

User-friendly query builder for React
https://ukrbublik.github.io/react-awesome-query-builder
MIT License
2.01k stars 499 forks source link

antd date picker style doesn't load when installing antd v5.14.2 #1032

Open Delaramv opened 8 months ago

Delaramv commented 8 months ago

Describe the bug When I upgrade the antd library to v5.14.2 and use the version 6.4.2 of awesome-query-builder, the date range picker doesn't load the datapicker style correctly on both query builder date and the other pages. When I remove the @react-awesome-query-builder/antd and just install @react-awesome-query-builder/ui it works correclty. the

Screenshots image

Update

It's working well with version 5.13.3 but not working with version 5.14.* Probably because of the changes for datepicker in https://ant.design/changelog

ukrbublik commented 6 months ago

Please update to the latest version (6.5.1) Do you still see this issue after update?

Delaramv commented 6 months ago

Yes, I tried yesterday, I updated the awesome-query-builder to version 6.5.1 and antd to version 5.17.2 still see the same issue. It seems the old version that is working has these classes "ant-picker-dropdown css-dev-only-do-not-override-wv73e9 ant-picker-dropdown-range ant-picker-dropdown-placement-bottomRight" but the newer version has "ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-active ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomRight"

when I change the awesome query builder to UI one it's working fine but for the antd skin it's not working

ukrbublik commented 6 months ago

Could you post a minimal reproduction sample, please? How do you import antd?

Delaramv commented 6 months ago

for query-builder: in Config.tsx:

import { BasicFuncs, Utils, BasicConfig, // types: Operators, Fields, Types, Conjunctions, LocaleSettings, OperatorProximity, Funcs, Settings, Widgets, Config, AntdConfig, AntdWidgets, } from '@react-awesome-query-builder/antd'; // when I change it to /ui it works fine

const skinToConfig: Record<string, Config> = { vanilla: BasicConfig, antd: AntdConfig, };

export default (skin: string, initialFields) => { const InitialConfig = skinToConfig[skin] as BasicConfig; ... }

index.tsx import { Query, Builder, Utils, //types: BuilderProps, ImmutableTree, Config, JsonTree, ActionMeta, Actions, } from '@react-awesome-query-builder/antd'; import '@react-awesome-query-builder/antd/css/styles.css //even when I remove this line I still have the issue'; import loadConfig from './config';

export default function QueryBuilder({ initVal = {}, setQueryData, }: { initVal: any; setQueryData: any; }) { const [initFields, setInitFields] = useState({});

const [loadedConfig, setLoadedConfig] = useState( loadConfig('antd', initFields) );

... }

ukrbublik commented 5 months ago

Created a sandbox with sample for antd, and sadly I can't reproduce your issue.: https://codesandbox.io/p/devbox/optimistic-robinson-6qp7fd?file=%2Fsrc%2Fdemo%2Fdemo.tsx&workspaceId=4dc94f7d-eecf-4350-9061-71bcf3035e6e

Could you please create a similar sandbox with your minimal code that can help me to reproduce the issue with date pickers?