Dropdown throws errors when AppMenu is collapsed

Post Reply
vba66a
Posts: 10
Joined: 25 Jun 2018, 05:22

10 Nov 2020, 08:47

Can someone please help to resolve the issue with Serenity theme?
- 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;

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

11 Nov 2020, 08:59

Hi,

Could you please attach the whole stack trace in the console? Also, which PrimeReact version are you using?

Best Regards,

vba66a
Posts: 10
Joined: 25 Jun 2018, 05:22

13 Nov 2020, 00:47

"primereact": "3.3.2",

from "name": "serenity-react",
"version": "3.0.2",

Complete stack:

Code: Select all

Dropdown.js:449 Uncaught TypeError: Cannot read property 'element' of null
    at Dropdown.js:449
(anonymous) @ Dropdown.js:449
setTimeout (async)
show @ Dropdown.js:448
onClick @ Dropdown.js:100
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:580
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4826
batchedUpdates$1 @ react-dom.development.js:20393
batchedUpdates @ react-dom.development.js:2151
dispatchEvent @ react-dom.development.js:4905
(anonymous) @ react-dom.development.js:20444
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20443
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882
Thanks a lot for looking into this!!!
VB

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

13 Nov 2020, 22:31

Thanks a lot for the info! I think this issue is related to PrimeReact core. But, the version that you use is very old. I think this problem is fixed with the new version. But, the new version doesn't work with the current Serenity version. We're working on it now. That's why you have to wait a while for now. We'll get back to you with the new version asap.

Thanks a lot for your understanding!
Best Regards,

Post Reply

Return to “Serenity - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests