Uploaded image for project: 'Isis'
  1. Isis
  2. ISIS-1224

drop down box (select2) is orphaned and floats top-right under certain circumstances

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 1.9.0
    • Fix Version/s: 1.15.0
    • Component/s: None
    • Labels:
      None

      Description

      This ticket supercedes ISIS-1020 (where the problem was originally reported)

      Original screencast to demonstrate in Estatio: https://drive.google.com/file/d/0B2jd2Sl73mDBZ0lqYUhtVjVRamc/view?usp=sharing
      This is reproducible in both IE11 and Chrome.

      It was hoped that upgrading to select v4 (dependent on Wicket 7 and ISIS-1223) might fix the problem, however it doesn't.

      See comments for further details.

        Activity

        Hide
        danhaywood Dan Haywood added a comment -

        This is reproducable with the security module's demo app.

        1. security>new delegate user
        2. type something in the name, but don't hit enter.
        3. click on the drop-down for the initial role.
        4. the drop-down will appear top-left.

        possibly related:
        1. security>new delegaet user
        2. type something in the name, and then hit tab
        3. the focus is NOT on the initial role.

        perhaps the problem is that we aren't able to / aren't giving focus to the select2 component.

        Show
        danhaywood Dan Haywood added a comment - This is reproducable with the security module's demo app. 1. security>new delegate user 2. type something in the name, but don't hit enter. 3. click on the drop-down for the initial role. 4. the drop-down will appear top-left. possibly related: 1. security>new delegaet user 2. type something in the name, and then hit tab 3. the focus is NOT on the initial role. perhaps the problem is that we aren't able to / aren't giving focus to the select2 component.
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 7c27df445e80452ee42ed00f023fea6225f17d22 in isis's branch refs/heads/ISIS-1224-select2-v4 from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=7c27df4 ]

        ISIS-1224 Upgrade select2 from v3.5.2 to v4, hopefully to address the floating drop-down problem

        Show
        jira-bot ASF subversion and git services added a comment - Commit 7c27df445e80452ee42ed00f023fea6225f17d22 in isis's branch refs/heads/ ISIS-1224 -select2-v4 from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=7c27df4 ] ISIS-1224 Upgrade select2 from v3.5.2 to v4, hopefully to address the floating drop-down problem
        Hide
        mgrigorov Martin Grigorov added a comment -

        It seems Select2 v4 doesn't have the problem.
        Please test branch "ISIS-1224-select2-v4". It contains the changes for this ticket and ISIS-1223 (Wicket 7).
        At the moment we need to use WicketStuff Select2 7.2.0-SNAPSHOT. If everything is OK then I'll release it as 7.1.1.

        Show
        mgrigorov Martin Grigorov added a comment - It seems Select2 v4 doesn't have the problem. Please test branch " ISIS-1224 -select2-v4". It contains the changes for this ticket and ISIS-1223 (Wicket 7). At the moment we need to use WicketStuff Select2 7.2.0-SNAPSHOT. If everything is OK then I'll release it as 7.1.1.
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 009b930ad6aeea0f7bce2fa6a31e4afffd5ee06d in isis's branch refs/heads/ISIS-1224-select2-v4 from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=009b930 ]

        Merge branch 'master' into ISIS-1224-select2-v4

        Show
        jira-bot ASF subversion and git services added a comment - Commit 009b930ad6aeea0f7bce2fa6a31e4afffd5ee06d in isis's branch refs/heads/ ISIS-1224 -select2-v4 from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=009b930 ] Merge branch 'master' into ISIS-1224 -select2-v4
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit bd2a54bc07710637132e1e31fe39889062cf3b8e in isis's branch refs/heads/ISIS-1224-select2-v4 from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=bd2a54b ]

        ISIS-1224 Upgrade select2 from v3.5.2 to v4, hopefully to address the floating drop-down problem

        Fix the path to select2.css dependency

        Show
        jira-bot ASF subversion and git services added a comment - Commit bd2a54bc07710637132e1e31fe39889062cf3b8e in isis's branch refs/heads/ ISIS-1224 -select2-v4 from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=bd2a54b ] ISIS-1224 Upgrade select2 from v3.5.2 to v4, hopefully to address the floating drop-down problem Fix the path to select2.css dependency
        Hide
        danhaywood Dan Haywood added a comment -

        Unfortunately v4 does not fix the issue. So we shall go ahead and also provide a selectize.js based impl.

        We should probably do this ticket anyway, though, and offer both UI (perhaps switchable via a config property)

        Show
        danhaywood Dan Haywood added a comment - Unfortunately v4 does not fix the issue. So we shall go ahead and also provide a selectize.js based impl. We should probably do this ticket anyway, though, and offer both UI (perhaps switchable via a config property)
        Hide
        danhaywood Dan Haywood added a comment -

        Martin's further analysis:

        [14:17:06] Martin Grigorov: the problem is:
        [14:19:32] Martin Grigorov: when you type something in the other (non-select2) fields and then click with the mouse on the Select2:
        1) an Ajax call is made due to the 'change' event in the first field
        2) Select2 drop-down is opened first time, with the old options
        3) the Ajax response comes and repaints the ReferencePanel, with a new Select2
        4) the new or the old (I am not sure) drop down becomes orphan and shows as: position: absolute; top:0; left:0

        ~~~~
        [14:19:36] Martin Grigorov: my fix is:
        [14:20:11] Martin Grigorov: do not repaint the complete ReferencePanel but just its Select2 component

        Show
        danhaywood Dan Haywood added a comment - Martin's further analysis: [14:17:06] Martin Grigorov: the problem is: [14:19:32] Martin Grigorov: when you type something in the other (non-select2) fields and then click with the mouse on the Select2: 1) an Ajax call is made due to the 'change' event in the first field 2) Select2 drop-down is opened first time, with the old options 3) the Ajax response comes and repaints the ReferencePanel, with a new Select2 4) the new or the old (I am not sure) drop down becomes orphan and shows as: position: absolute; top:0; left:0 ~~~~ [14:19:36] Martin Grigorov: my fix is: [14:20:11] Martin Grigorov: do not repaint the complete ReferencePanel but just its Select2 component
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 17d7159fa58871c64bc70be3b467a139d7464a90 in isis's branch refs/heads/ISIS-1224-select2-v4 from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=17d7159 ]

        Merge branch 'ISIS-1223-upgrade-to-wicket-7' into ISIS-1224-select2-v4

        Show
        jira-bot ASF subversion and git services added a comment - Commit 17d7159fa58871c64bc70be3b467a139d7464a90 in isis's branch refs/heads/ ISIS-1224 -select2-v4 from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=17d7159 ] Merge branch ' ISIS-1223 -upgrade-to-wicket-7' into ISIS-1224 -select2-v4
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 7b5bfad70743279c59cfe3e520ba7feb63098529 in isis's branch refs/heads/ISIS-1224-select2-v4 from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=7b5bfad ]

        ISIS-1224 Upgrade select2 from v3.5.2 to v4

        In ActionParametersFormPanel do not repaint the complete ReferencePanel/ValueChoicesSelect2Panel but just its Select2 child component.
        It the complete parent is repainted then Select2 JS widget somehow looses information about the parent DOM element and renders the drop-down as orphan, i.e. CSS: position:absolute; left:0; top:0;

        If only the Select2Choice element is repainted then it just sends its new values as JSON back and doesn't recreate the complete widget but just its options.

        The flow is:
        1) the user types something in another field
        2) the user clicks on Select2
        2.1) the 'change' JS event for the first field fires Ajax call
        2.1.1) with the old behavior the Ajax response repaints the whole ReferencePanel
        2.1.2) with the new behavior the Ajax response repaints only the Select2 options
        2.2) the click on Select2 opens its drop-down
        2.3) the Ajax response for 2.1) comes and closes Select2 to update it
        3) with the new behavior the user has to click second time to show the drop-down again, but at least its CSS position is correct

        Show
        jira-bot ASF subversion and git services added a comment - Commit 7b5bfad70743279c59cfe3e520ba7feb63098529 in isis's branch refs/heads/ ISIS-1224 -select2-v4 from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=7b5bfad ] ISIS-1224 Upgrade select2 from v3.5.2 to v4 In ActionParametersFormPanel do not repaint the complete ReferencePanel/ValueChoicesSelect2Panel but just its Select2 child component. It the complete parent is repainted then Select2 JS widget somehow looses information about the parent DOM element and renders the drop-down as orphan, i.e. CSS: position:absolute; left:0; top:0; If only the Select2Choice element is repainted then it just sends its new values as JSON back and doesn't recreate the complete widget but just its options. The flow is: 1) the user types something in another field 2) the user clicks on Select2 2.1) the 'change' JS event for the first field fires Ajax call 2.1.1) with the old behavior the Ajax response repaints the whole ReferencePanel 2.1.2) with the new behavior the Ajax response repaints only the Select2 options 2.2) the click on Select2 opens its drop-down 2.3) the Ajax response for 2.1) comes and closes Select2 to update it 3) with the new behavior the user has to click second time to show the drop-down again, but at least its CSS position is correct
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 2eaf24216586112ef61b734fdf4940c6fb6abf52 in isis's branch refs/heads/ISIS-1224-wicket6-backport from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=2eaf242 ]

        ISIS-1224 Upgrade select2 from v3.5.2 to v4

        In ActionParametersFormPanel do not repaint the complete ReferencePanel/ValueChoicesSelect2Panel but just its Select2 child component.
        It the complete parent is repainted then Select2 JS widget somehow looses information about the parent DOM element and renders the drop-down as orphan, i.e. CSS: position:absolute; left:0; top:0;

        If only the Select2Choice element is repainted then it just sends its new values as JSON back and doesn't recreate the complete widget but just its options.

        The flow is:
        1) the user types something in another field
        2) the user clicks on Select2
        2.1) the 'change' JS event for the first field fires Ajax call
        2.1.1) with the old behavior the Ajax response repaints the whole ReferencePanel
        2.1.2) with the new behavior the Ajax response repaints only the Select2 options
        2.2) the click on Select2 opens its drop-down
        2.3) the Ajax response for 2.1) comes and closes Select2 to update it
        3) with the new behavior the user has to click second time to show the drop-down again, but at least its CSS position is correct

        Show
        jira-bot ASF subversion and git services added a comment - Commit 2eaf24216586112ef61b734fdf4940c6fb6abf52 in isis's branch refs/heads/ ISIS-1224 -wicket6-backport from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=2eaf242 ] ISIS-1224 Upgrade select2 from v3.5.2 to v4 In ActionParametersFormPanel do not repaint the complete ReferencePanel/ValueChoicesSelect2Panel but just its Select2 child component. It the complete parent is repainted then Select2 JS widget somehow looses information about the parent DOM element and renders the drop-down as orphan, i.e. CSS: position:absolute; left:0; top:0; If only the Select2Choice element is repainted then it just sends its new values as JSON back and doesn't recreate the complete widget but just its options. The flow is: 1) the user types something in another field 2) the user clicks on Select2 2.1) the 'change' JS event for the first field fires Ajax call 2.1.1) with the old behavior the Ajax response repaints the whole ReferencePanel 2.1.2) with the new behavior the Ajax response repaints only the Select2 options 2.2) the click on Select2 opens its drop-down 2.3) the Ajax response for 2.1) comes and closes Select2 to update it 3) with the new behavior the user has to click second time to show the drop-down again, but at least its CSS position is correct
        Hide
        danhaywood Dan Haywood added a comment -

        I've tested Martin's fix against Jeroen's original test case... things are better, but still not perfect.

        See this screencast: https://drive.google.com/open?id=0Bxw-_f4BrwqAeHNqS3RQNlZCbzQ

        Show
        danhaywood Dan Haywood added a comment - I've tested Martin's fix against Jeroen's original test case... things are better, but still not perfect. See this screencast: https://drive.google.com/open?id=0Bxw-_f4BrwqAeHNqS3RQNlZCbzQ
        Hide
        danhaywood Dan Haywood added a comment - - edited

        To reproduce with the simpleapp, just add the following to SimpleObjects domain service:

            public enum SomeEnum {
                FOO,FIZ,FOZ
            }
            public enum OtherEnum {
                BISH,BASH,BOSH
            }
            public void demoSelect2(
                    @ParameterLayout(named="Name") final String name,
                    final SomeEnum someEnum,
                    final OtherEnum otherEnum) {
                // no-op
            }
        
        Show
        danhaywood Dan Haywood added a comment - - edited To reproduce with the simpleapp, just add the following to SimpleObjects domain service: public enum SomeEnum { FOO,FIZ,FOZ } public enum OtherEnum { BISH,BASH,BOSH } public void demoSelect2( @ParameterLayout(named= "Name" ) final String name, final SomeEnum someEnum, final OtherEnum otherEnum) { // no-op }
        Hide
        danhaywood Dan Haywood added a comment -

        Also noticed that when the focus is lost from the dialog, then pressing ESC to close the dialog does nothing. Probably no surprise.

        Show
        danhaywood Dan Haywood added a comment - Also noticed that when the focus is lost from the dialog, then pressing ESC to close the dialog does nothing. Probably no surprise.
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 5576387731bc74affcc34c5c39899a67c7d71676 in isis's branch refs/heads/ISIS-1224-select2-v4 from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=5576387 ]

        Merge branch 'ISIS-1223-upgrade-to-wicket-7' into ISIS-1224-select2-v4

        Show
        jira-bot ASF subversion and git services added a comment - Commit 5576387731bc74affcc34c5c39899a67c7d71676 in isis's branch refs/heads/ ISIS-1224 -select2-v4 from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=5576387 ] Merge branch ' ISIS-1223 -upgrade-to-wicket-7' into ISIS-1224 -select2-v4
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 17d7159fa58871c64bc70be3b467a139d7464a90 in isis's branch refs/heads/master from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=17d7159 ]

        Merge branch 'ISIS-1223-upgrade-to-wicket-7' into ISIS-1224-select2-v4

        Show
        jira-bot ASF subversion and git services added a comment - Commit 17d7159fa58871c64bc70be3b467a139d7464a90 in isis's branch refs/heads/master from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=17d7159 ] Merge branch ' ISIS-1223 -upgrade-to-wicket-7' into ISIS-1224 -select2-v4
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 7b5bfad70743279c59cfe3e520ba7feb63098529 in isis's branch refs/heads/master from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=7b5bfad ]

        ISIS-1224 Upgrade select2 from v3.5.2 to v4

        In ActionParametersFormPanel do not repaint the complete ReferencePanel/ValueChoicesSelect2Panel but just its Select2 child component.
        It the complete parent is repainted then Select2 JS widget somehow looses information about the parent DOM element and renders the drop-down as orphan, i.e. CSS: position:absolute; left:0; top:0;

        If only the Select2Choice element is repainted then it just sends its new values as JSON back and doesn't recreate the complete widget but just its options.

        The flow is:
        1) the user types something in another field
        2) the user clicks on Select2
        2.1) the 'change' JS event for the first field fires Ajax call
        2.1.1) with the old behavior the Ajax response repaints the whole ReferencePanel
        2.1.2) with the new behavior the Ajax response repaints only the Select2 options
        2.2) the click on Select2 opens its drop-down
        2.3) the Ajax response for 2.1) comes and closes Select2 to update it
        3) with the new behavior the user has to click second time to show the drop-down again, but at least its CSS position is correct

        Show
        jira-bot ASF subversion and git services added a comment - Commit 7b5bfad70743279c59cfe3e520ba7feb63098529 in isis's branch refs/heads/master from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=7b5bfad ] ISIS-1224 Upgrade select2 from v3.5.2 to v4 In ActionParametersFormPanel do not repaint the complete ReferencePanel/ValueChoicesSelect2Panel but just its Select2 child component. It the complete parent is repainted then Select2 JS widget somehow looses information about the parent DOM element and renders the drop-down as orphan, i.e. CSS: position:absolute; left:0; top:0; If only the Select2Choice element is repainted then it just sends its new values as JSON back and doesn't recreate the complete widget but just its options. The flow is: 1) the user types something in another field 2) the user clicks on Select2 2.1) the 'change' JS event for the first field fires Ajax call 2.1.1) with the old behavior the Ajax response repaints the whole ReferencePanel 2.1.2) with the new behavior the Ajax response repaints only the Select2 options 2.2) the click on Select2 opens its drop-down 2.3) the Ajax response for 2.1) comes and closes Select2 to update it 3) with the new behavior the user has to click second time to show the drop-down again, but at least its CSS position is correct
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit 5576387731bc74affcc34c5c39899a67c7d71676 in isis's branch refs/heads/master from Martin Grigorov
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=5576387 ]

        Merge branch 'ISIS-1223-upgrade-to-wicket-7' into ISIS-1224-select2-v4

        Show
        jira-bot ASF subversion and git services added a comment - Commit 5576387731bc74affcc34c5c39899a67c7d71676 in isis's branch refs/heads/master from Martin Grigorov [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=5576387 ] Merge branch ' ISIS-1223 -upgrade-to-wicket-7' into ISIS-1224 -select2-v4
        Hide
        jira-bot ASF subversion and git services added a comment -

        Commit c66f629b065894dd50a63eb2c1c79bc8c69bdc2d in isis's branch refs/heads/master from Dan Haywood
        [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=c66f629 ]

        ISIS-1224: updates select2 to v4

        Show
        jira-bot ASF subversion and git services added a comment - Commit c66f629b065894dd50a63eb2c1c79bc8c69bdc2d in isis's branch refs/heads/master from Dan Haywood [ https://git-wip-us.apache.org/repos/asf?p=isis.git;h=c66f629 ] ISIS-1224 : updates select2 to v4

          People

          • Assignee:
            mgrigorov Martin Grigorov
            Reporter:
            danhaywood Dan Haywood
          • Votes:
            1 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development