问题及原因
问题：这种情况主要出现在用到页面弹窗的时候，比如modal组件以及其它弹窗组件，在里面使用form表单的select组件时搜索框无法输入
原因：查看资料发现是由于modal弹窗的最外层div设置了tabindex="-1"这个属性，使得弹窗中元素获取不到焦点，因此造成输入框无法输入
解决办法
重写模态对话框的enforceFocus函数，使得其它元素可以获取焦点
laravel-admin中只需要在控制器的grid方法中添加以下代码即可
$script = <<<EOT $.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("div[id^='grid-modal-']").removeAttr('tabindex'); $("div[id='modal']").removeAttr('tabindex'); EOT; \Encore\Admin\Facades\Admin::script($script);
前端解决的话直接在页面中添加以下js代码即可
$.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("div[id^='grid-modal-']").removeAttr('tabindex'); $("div[id='modal']").removeAttr('tabindex');
