jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 5 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

jqxmenu looses onClick attribute when menu is minized Posts

March 30, 2020 at 4:41 am jqxmenu looses onClick attribute when menu is minized #111567

Participant

I am using the latest version of jqwidgets-scripts with a react application, from my package.json file: “jqwidgets-scripts”: “^9.0.0”

Here is the code that can demonstrate the problem:
index.html


<body>
  <div class="example-description">
    The demo how a jqxmenu properly handles onClick events, but not when minimized.
    <br />
    <br />
    To Reproduce:
    <ul>
      <li>Load the page</li>
      <li>Click on any of the three menu items</li>
      <li>Now check the Minimized checkbox</li>
      <li>Click on any of the three menu items</li>
    </ul>

    Results:
    After the menu is minimized the onClick events are no longer functional. Even when you uncheck the
    Minimized checkbox, the onClick event no longer work.
    <br />
    <br />

  </div>

  <div id="root"></div>
</body>

and my App.tsx


import * as React from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
import JqxMenu from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}> {
  private theme = "custom-scheme";

  private myMenu = React.createRef<JqxMenu>();
  private myCheckBox = React.createRef<JqxCheckBox>();
  constructor(props: {}) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  public componentDidMount() {
    // Commenting this next line out so as to start the menu NOT minimized
    // this.myMenu.current!.minimize();
  }
  public render() {
    return (
      <div>
        <JqxMenu ref={this.myMenu}
                 width={'100%'}
                 height={32}
                 autoSizeMainItems={true}
                 theme={this.theme}
        >
          <ul>
            <li>
              <div onClick={this.onTestClick}>Item 1</div>
            </li>
            <li>
              <div onClick={this.onTestClick}>Item 2</div>
            </li>
            <li>
              <div onClick={this.onTestClick}>Item 3</div>
            </li>
          </ul>
        </JqxMenu>
        <br />
        <br />
        <JqxCheckBox ref={this.myCheckBox} onChange={this.onChange} checked={false} hasThreeStates={false}>Minimized</JqxCheckBox>
      </div>
    );
  }

  private onChange(event: any): void {
    if (this.myCheckBox.current!.getOptions('checked')) {
      this.myMenu.current!.minimize();
    }
    else {
      this.myMenu.current!.restore();
    }
  };

  private onTestClick(event: any): void {
    alert("Boom!");
  }
}
export default App;

When the page starts up. The menu is NOT minimized, you can click on any of the three menu items. The alert() will run. If you check the minimized checkbox and minimize the menu and click on any of the menu items the onClick does not fire any longer. You can uncheck the minimized box to restore the menu and the onClick now doesn’t work as it did on starting the page.

Any help in getting a fix for this would be greatly appreciated. Thanks.

April 1, 2020 at 10:05 am jqxmenu looses onClick attribute when menu is minized #111594

Hristo

Participant

Hello Jon Totton,

I would like to suggest you bind to the itemclick event.
This will provide you information on which item exactly is clicked.
After that, you could add the desired logic for each one.
Or to bind the same logic for all.
Please, take a look at the “JSON Menu” demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.