Enterprise: Popupmenu with submenus won't open

Created on 28 Aug 2019  路  7Comments  路  Source: infor-design/enterprise

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to ids-enterprise sample app
  2. Click on popupdemo
  3. Use this code for popup
    <ul soho-popupmenu id="action-popupmenu">
      <li soho-popupmenu-item><a soho-popupmenu-label>Cut</a></li>
      <li soho-popupmenu-item><a soho-popupmenu-label>Copy</a></li>
      <li soho-popupmenu-item><a soho-popupmenu-label>Paste</a></li>
      <li soho-popupmenu-item [subMenu]="true">
        <a soho-popupmenu-label>Paste Special</a>
        <ul>
          <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 1</a></li>
          <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 2</a></li>

          <li soho-popupmenu-item [subMenu]="true">
            <a soho-popupmenu-label>Paste Special</a>
            <ul>
              <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 1</a></li>
              <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 2</a></li>
              <li soho-popupmenu-item [subMenu]="true">
                <a soho-popupmenu-label>Paste Special</a>
                <ul>
                  <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 1</a></li>
                  <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 2</a></li>

                  <li soho-popupmenu-item [subMenu]="true">
                    <a soho-popupmenu-label>Paste Special</a>
                    <ul>
                      <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 1</a></li>
                      <li soho-popupmenu-item><a soho-popupmenu-label>Sub Menu 2</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li soho-popupmenu-separator></li>
      <li soho-popupmenu-item><a soho-popupmenu-label>Name and project range</a></li>
      <li soho-popupmenu-item [isDisabled]="isInsertCommentDisabled"><a soho-popupmenu-label id="x">Insert comment</a></li>
      <li soho-popupmenu-item [isDisabled]="isInsertNoteDisabled"><a soho-popupmenu-label>Insert note</a></li>
      <li soho-popupmenu-item><a soho-popupmenu-label >Clear notes</a></li>
      <li soho-popupmenu-separator singleSelectableSection="true"></li>
      <li soho-popupmenu-heading>Additional Options</li>
      <li soho-popupmenu-item isChecked="true" isSelectable="true"><a soho-popupmenu-label>Conditio nal formatting</a></li>
      <li soho-popupmenu-item isSelectable="true"><a soho-popupmenu-label>Data validation</a></li>
    </ul>
  1. Move cursor to sub-menu (it will open) now move mouse outside menu up, then around the menu on the left, down and then back to nested menu -> it won't open

Expected behavior
Popupmenu submenus should open no matter the direction the cursor came from

Version

  • ids-enterprise-ng: 5.5.1

Platform

  • Browser Name: Chrome

Additional context
see video
popup-bug

[3] type

All 7 comments

This issue can also be reproduced on http://localhost:4000/components/popupmenu/example-submenus.html in a simple way.

  • open submenu 1
  • open submenu 2
  • open submenu 3
  • move the mouse up off the top of submenu 3

So the issue isn't really that the menu "won't open", as much as "something is causing the menu to close when the mouse enters the menu the wrong way".

Possibly duplicate mouseover events, or maybe something needs pointer-events: none that doesn't already have it.

Yeah, I think it's both, definitely something is screwy with it. After it closes incorrectly then it won't open.

actually in our UI, the menu won't show at all sometimes, I could only reproduce it like this. Maybe the reason is that all submenus are generated dynamically

Ok lets try and fix what we see and hope it solves your case too.

perfect, thank you!

Was this page helpful?
0 / 5 - 0 ratings