ukrbublik/react-awesome-query-builder

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

Opened this issue · 5 comments

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

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

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

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

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)
);

...
}

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?