Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't type anything if select2 in modal #41

Closed
embambols opened this issue Jun 3, 2015 · 11 comments
Closed

Can't type anything if select2 in modal #41

embambols opened this issue Jun 3, 2015 · 11 comments
Labels

Comments

@embambols
Copy link

embambols commented Jun 3, 2015

After recent updates typing wasn't working in any of my select2 widgets that were inside bootstrap modals. Then I found this solution which seems to have worked for me: select2/select2#1436

It was working fine before I did the update on everything and now I don't know what the cause of the problem is (either update of select2 widget or yii2 update), but since that solution is from almost 2 years ago I have a feeling that the problem is somewhere in your widget, because it was updated very recently.

@kartik-v
Copy link
Owner

kartik-v commented Jun 3, 2015

You need to check the demos and docs pages for the widget.

The Select2 widget works perfectly with modal. You need to set the Modal markup correctly for it to work. Check the demo page and scroll down to button for example for Select2 inside a MODAL.

Note the important setting for the Modal dialog... the tabindex must NOT be set and must be set to false as shown.

@kartik-v kartik-v closed this as completed Jun 3, 2015
@embambols
Copy link
Author

embambols commented Jun 5, 2015

Ok. Thanks. It's just that it worked fine before, even without setting 'tabindex' => false. Have quite few places to update now :)

@sankam-nikolya
Copy link

sankam-nikolya commented May 6, 2016

thx

@elviskudo
Copy link

elviskudo commented Jun 11, 2016

sorry for open this issue again,
now i found that problem again
cannot any typing on this widget in modal
and i see tab-index=-1
how can i solve this problem, thanks

@alvarolordelo
Copy link

alvarolordelo commented Apr 15, 2017

how to set it required like HTML 5 validation
'required' => 'required' inside options isn't working
it should shown a required pop-up

field($model, 'end_cidade_id')->widget(\kartik\widgets\Select2::classname(), [ 'data' => \yii\helpers\ArrayHelper::map(\app\modulos\estoque\models\EndCidade::find()->where(['end_estado_id' => $model->end_estado_id])->orderBy('name')->asArray()->all(), 'id', 'name'), 'options' => [ 'required' => 'required', 'placeholder' => 'Selecione a cidade' ], 'pluginOptions' => [ 'allowClear' => true ], ]); ?>

@Starite
Copy link

Starite commented May 9, 2017

Can't type anything if select2 in modal when using Firefox, Chrome works fine. Can you help me with this? thank you!

@robov
Copy link

robov commented Aug 27, 2017

Although I have it working in a bootstap modal... it works in chrome... but not in firefox...
Any ideas ?
I was so flabbergasted by this that I did not see the previous post...

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

worked for me

@dzona
Copy link

dzona commented Oct 27, 2017

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

@kartik-v
Copy link
Owner

kartik-v commented Oct 27, 2017

You may want to set dropdownParent property of Select2 to the Modal Dialog identifier for addressing this (have not tested this though... for example):

echo Select2::widget([ 
    'pluginOptions' => [
        'dropdownParent' => new yii\web\JsExpression('$("#modalDialogId")'), 
    ],
   // your other select2 widget settings
]);

@lieszkol
Copy link

lieszkol commented May 29, 2018

Kartik's last example is the PROPER solution of the three, but it should really be:

echo Select2::widget([ 
    'pluginOptions' => [
        'dropdownParent' => new JsExpression('$("#modalDialogId")'),
    ],
   // your other select2 widget settings
]);

(of course you should substitute modalDialogId with the actual ID of the modal dialog)

Summarizing it all:
The problem is Bootstrap Modal inserting some js that grabs the focus of anything not inside of the modal. The Select2 drop-down is actually rendered outside of the Modal DOM element. There are three ways to fix this:

  1. Make sure that the rendered modal does not have tabIndex="whatever" inside of it. This is the solution employed in Kartik's docs here: ()
Modal::begin([
'options' => [
'id' => 'kartik-modal',
'tabindex' => false, 
...

This is also the "accepted" solution here:
Unfortunately, it is a hack and has some side-effects like breaking the ESC key to exit the modal, and scrolling issues if the modal is very long.

  1. It is also possible to disable the Bootstrap Modal from trying to prevent focus from other elements when it's shown:
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

This is detailed also on the link above as well as here:
But again, this is a hack and has side-effects.

  1. The PROPER solution is to let Select2 know that it should attach itself to the modal (or one of it's children, like the modal body).
    This is also described in the two links above and mentioned above by Kartik.

To implement the proper solution that doesn't break intended bootstrap modal functionality, do what is written at the top of this post!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

10 participants