Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Delaramv opened this issue Feb 26, 2024 · 5 comments
Open

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

Delaramv opened this issue Feb 26, 2024 · 5 comments

Comments

@Delaramv
Copy link

Delaramv commented Feb 26, 2024

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

@Delaramv Delaramv changed the title antd date picker doesn't load when installing antd v6.14.2 antd date picker style doesn't load when installing antd v6.14.2 Feb 26, 2024
@Delaramv Delaramv changed the title antd date picker style doesn't load when installing antd v6.14.2 antd date picker style doesn't load when installing antd v5.14.2 Feb 26, 2024
@ukrbublik
Copy link
Owner

ukrbublik commented May 17, 2024

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

@Delaramv
Copy link
Author

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
Copy link
Owner

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

@Delaramv
Copy link
Author

Delaramv commented May 17, 2024

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
Copy link
Owner

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants