Select 2 and popover-x

[cluwong]

Prerequisites

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] The issue still exists against the latest master branch of yii2-popover-x.
• [x] This is not an usage question. I confirm having gone through and read the documentation and demos.
• [x] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [x] I have attempted to find the simplest possible steps to reproduce the issue.
• [ ] I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

This happens when Select2 widget is placed inside PopoverX widget and when Select2 is used with as input in Editable Column. Select2 widget by itself works fine.

Expected behavior and actual behavior

When I follow those steps, I see...

1. Select2 dropdown is hiding behind the popover widget.
2. When trying to type to search for data in dropdown list, entire PopoverX box disappears.
3. Have tried the solution in https://select2.org/troubleshooting/common-problems by setting dropdownParent property but that does not fix the problem.

I was expecting... Dropdown display inside popoverX widget and I can type to search for data in dropdown list.

Environment

Browsers

• [x] Google Chrome
• [ ] Mozilla Firefox
• [ ] Internet Explorer
• [x] Safari

Operating System

• [ ] Windows
• [x] Mac OS X
• [ ] Linux
• [ ] Mobile

Libraries

• jQuery version: 3.6
• yii2-popover-x version: dev-master
• yii2-select2 version: 2.2.2.0

Isolating the problem

• [ ] This bug happens on the demos page
• [ ] The bug happens consistently across all tested browsers
• [ ] This bug happens when using yii2-popover-x without other plugins.

[kartik-v]

You need to configure dropdownParent property correctly. Check the 4th example in Select2 Demo Advanced to see Select2 embedded correctly inside Krajee Popover X.

[cluwong]

Have followed the demo - set id for popover-x widget and configured dropdownParent to the id. The behavior is as described above - dropdown box is displayed behind popover-x and popover disappears when typing. The difference spotted is demo uses Select2 4.1.0-rc.0 and my app uses Select2 4.0.13, could this be the reason?

[kartik-v]

It is possible because of the outdated plugin version for select2. Also you may need to check if you have other CSS/JS which is overriding the modal dialog behavior.

The best approach for you is to try with a simple plain install of yii2 with bootstrap 5 and yii2-widget-select2 widget and then add your other themes / extensions one by one to see where it breaks.