- In App.js layoutMode is set to 'overlay' as default state in constructor (or just collapse AppMenu);
- page has Dropdown control with static list of options;
- when user clicks on an arrow to open the dropdown, nothing happens and console has next error:
Uncaught TypeError: Cannot read property 'element' of null
When user clocks on sliding menu and fix it, dropdown works as expected.
Code on the page:
Code: Select all
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Dropdown} from 'primereact/dropdown';
import { setTheme } from '../../core/actions/core.action.creators';
const UserSettings = () => {
const user_details = useSelector(state=>state.user.details);
const currentTheme = useSelector(state=>state.core.theme) || 'bluegrey';
const [selectedTheme, setSelected] = useState(currentTheme);
const dispatch = useDispatch();
const themes = [
{ label: 'Blue Grey - Green', value:'bluegrey' },
{ label: 'Indigo - Pink', value:'indigo' },
{ label: 'Pink - Amber', value:'pink' },
{ label: 'Purple - Pink', value:'purple' },
{ label: 'Deep Purple - Orange', value:'deeppurple' },
{ label: 'Blue - Amber', value:'blue' },
{ label: 'Light Blue - Blue Grey', value:'lightblue' },
{ label: 'Cyan - Amber', value:'cyan' },
{ label: 'Teal - Red', value:'teal' },
{ label: 'Green - Brown', value:'green' },
{ label: 'Light Green - Purple', value:'lightgreen' },
{ label: 'Lime - Blue Grey', value:'lime' },
{ label: 'Yellow - Teal', value:'yellow' },
{ label: 'Amber - Pink', value:'amber' },
{ label: 'Orange - Indigo', value:'orange' },
{ label: 'Deep Orange - Cyan', value:'deeporange' },
{ label: 'Brown - Cyan', value:'brown' },
{ label: 'Grey - Indigo', value:'grey' }];
const setSelectedTheme = (theme) => {
setSelected(theme);
dispatch(setTheme(theme));
}
return (
<div className="p-grid p-fluid" style={{width:'100%'}}>
<div className="p-col-12 p-lg-12" style={{marginTop:'1em'}} >
<div className="card">
<div className="p-grid">
<div className="p-col-12">Theme settings </div>
<Dropdown options={themes} value={selectedTheme}
onChange={(e) => setSelectedTheme(e.value)} />
</div>
</div>
</div>
</div>
);
}
export default UserSettings;