Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-95097

auiSelect2 z-index issue when used with 2 modals

XMLWordPrintable

      Issue Summary

      This is reproducible on Data Center: yes

      The logic behind assigning a z-index to auiSelect2 is not working correctly. The drop-down list of a child modal window considers its parent not the modal window in which it was opened, that is - the very first open modal window. Because of this, the dropdown list is not visible.

      In short, the parent modal has a z-index of 3000, the child has a z-index of 3100, and the dropdown has a z-index of 3002 (it should be 3102). The drop-down list considers the modal window to be the parent of the parent, and therefore the display does not work correctly.

      This issue started in Confluence 8.8.0

      AUI Select2 uses version 3.5.x of Select2. In this version you can set the z-index with 

      dropdownCss: { "z-index": "10000" }

      but this then causes errors in the UI with the Select2 dropdown not disappearing after use.

      In version 4.x of https://select2.org/ it has option

      dropdownParent: $('#child-modal-dialog')

      which would fix this issue.

      This is also referenced in https://community.developer.atlassian.com/t/aui-dialog2-issue-with-select2-dropdown/77627

      Steps to Reproduce

      1. Create a button that appears on a modal in Confluence
      2. Create a modal that opens a new dialog
      3. In the dialog create a new Select2

      Expected Results

      The Select2 dialog works as expected.

      Actual Results

      The Select2 drop down list does not appear in the view.

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

            [CONFSERVER-95097] auiSelect2 z-index issue when used with 2 modals

            Rob made changes -
            Labels Original: ecohelp New: KR1-L2LR ecohelp
            mkemp [Atlassian] made changes -
            Remote Link Original: This issue links to "AUI-5482 (Ecosystem Jira)" [ 901213 ] New: This issue links to "AUI-5482 (Ecosystem JIRA)" [ 901213 ]
            mkemp [Atlassian] made changes -
            Remote Link New: This issue links to "AUI-5482 (Ecosystem Jira)" [ 901213 ]
            Edward made changes -
            Status Original: Needs Triage [ 10030 ] New: Gathering Impact [ 12072 ]
            Edward made changes -
            Introduced in Version Original: 9.13
            James Richards made changes -
            Description Original: h3. Issue Summary

            This is reproducible on Data Center: yes

            The logic behind assigning a {{z-index}} to {{auiSelect2}} is not working correctly. The drop-down list of a child modal window considers its parent not the modal window in which it was opened, that is - the very first open modal window. Because of this, the dropdown list is not visible.

            In short, the parent modal has a {{z-index}} of 3000, the child has a {{z-index}} of 3100, and the dropdown has a {{z-index}} of 3002 (it should be 3102). The drop-down list considers the modal window to be the parent of the parent, and therefore the display does not work correctly.

            This issue started in Jira 9.13 and does not appear in 9.12.

            [AUI Select2|https://aui.atlassian.com/aui/latest/docs/auiselect2.html] uses version 3.5.x of Select2. In this version you can set the {{z-index}} with 
            {code:java}
            dropdownCss: { "z-index": "10000" } {code}
            but this then causes errors in the UI with the Select2 dropdown not disappearing after use.

            In version 4.x of [https://select2.org/] it has option
            {code:java}
            dropdownParent: $('#child-modal-dialog') {code}
            which would fix this issue.

            This is also referenced in https://community.developer.atlassian.com/t/aui-dialog2-issue-with-select2-dropdown/77627
            h3. Steps to Reproduce
             # Create a button that appears on a modal in Jira, e.g. Create Issue
             # Create a modal that opens a new dialog
             # In the dialog create a new Select2

            h3. Expected Results

            The Select2 dialog works as expected.
            h3. Actual Results

            The Select2 drop down list does not appear in the view.
            h3. Workaround

            Currently there is no known workaround for this behavior. A workaround will be added here when available             		New: h3. Issue Summary

            This is reproducible on Data Center: yes

            The logic behind assigning a {{z-index}} to {{auiSelect2}} is not working correctly. The drop-down list of a child modal window considers its parent not the modal window in which it was opened, that is - the very first open modal window. Because of this, the dropdown list is not visible.

            In short, the parent modal has a {{z-index}} of 3000, the child has a {{z-index}} of 3100, and the dropdown has a {{z-index}} of 3002 (it should be 3102). The drop-down list considers the modal window to be the parent of the parent, and therefore the display does not work correctly.

            This issue started in Confluence 8.8.0

            [AUI Select2|https://aui.atlassian.com/aui/latest/docs/auiselect2.html] uses version 3.5.x of Select2. In this version you can set the {{z-index}} with 
            {code:java}
            dropdownCss: { "z-index": "10000" } {code}
            but this then causes errors in the UI with the Select2 dropdown not disappearing after use.

            In version 4.x of [https://select2.org/] it has option
            {code:java}
            dropdownParent: $('#child-modal-dialog') {code}
            which would fix this issue.

            This is also referenced in [https://community.developer.atlassian.com/t/aui-dialog2-issue-with-select2-dropdown/77627]
            h3. Steps to Reproduce
             # Create a button that appears on a modal in Confluence
             # Create a modal that opens a new dialog
             # In the dialog create a new Select2

            h3. Expected Results

            The Select2 dialog works as expected.
            h3. Actual Results

            The Select2 drop down list does not appear in the view.
            h3. Workaround

            Currently there is no known workaround for this behavior. A workaround will be added here when available
            James Richards made changes -
            Labels Original: FY24RRD ecohelp New: ecohelp
            James Richards made changes -
            Component/s Original: Front-end API [ 51191 ]
            Component/s New: Web Interface - AUI [ 42801 ]
            Key Original: JRASERVER-77598 New: CONFSERVER-95097
            QA Demo Status New: Not Done [ 14330 ]
            QA Kickoff Status New: Not Done [ 14234 ]
            Affects Version/s Original: 9.13.0 [ 105924 ]
            Affects Version/s New: 8.8.0 [ 106508 ]
            Workflow Original: JAC Bug Workflow v3 [ 4448174 ] New: CONFSERVER Bug Workflow v4 [ 4448175 ]
            Project Original: Jira Data Center [ 10240 ] New: Confluence Data Center [ 10470 ]
            James Richards made changes -
            Link New: This issue is cloned from JRASERVER-77551 [ JRASERVER-77551 ]
            James Richards created issue -

              Unassigned Unassigned
              jrichards@atlassian.com James Richards
              Affected customers:
              0 This affects my team
              Watchers:
              2 Start watching this issue

                Created:
                Updated: