EasyAdmin Bundle 创建的下拉菜单未在选择时关闭

Posted 2023-02-16

【中文标题】EasyAdmin Bundle 创建的下拉菜单未在选择时关闭

【英文标题】：Dropdown created by EasyAdmin Bundle not closing on select

【发布时间】：2019-10-02 23:34:49

【问题描述】：

我正在使用 easyadmin 包为我的 Symfony4.2 站点创建一个后端。在为我的实体创建的新/编辑表单中，它会创建一个下拉列表以供选择。但是，在 chrome 和 firefox 中，这些下拉菜单的行为与预期不同。当我单击它们时，它会显示选项，但如果我选择一个选项或单击远离下拉菜单，它不会关闭。它在 Safari 和 Edge 上运行良好。

这里是easyadmin.yaml

easy_admin:
    #Global Settings
    site_name: 'Physics Quiz SIte'

    design:
        assets:
            favicon: '/build/images/favicon.ba133a8b.ico'
    # this is the default form theme used by backends
        form_theme: '@EasyAdmin/form/bootstrap_4.html.twig'
    # these custom templates are applied to all entities
        brand_color: '#1ABC9C'
        menu:
            -  label: 'Public Homepage', route: 'homepage', icon: 'home' 
            -  entity: 'User', icon: 'user' 
            -  entity: 'QuestionType' 
            -  entity: 'Question' 
            -  entity: 'Quiz' 

    show:
        max_results: 10

    list:
        actions:
            -  name: 'edit', icon: 'pencil'
            -  name: 'delete', icon: 'trash'
        # allow deleting multiple items at once ...
        batch_actions: ['delete']

    # List the entity class name you want to manage
    entities:
        Quiz:
            class: App\Entity\Quiz
            form:
                fields:
                -   property: 'quizname'
                    label: 'Quiz Name'
                -   property: 'course'
                    type: 'entity'
                    type_options:
                        expanded: false
                        multiple: false

这是创建的相关页面源：

<div class="col-12 ">
 <div class="form-group  field-entity">
  <label class="form-control-label required" for="quiz_course">Course</label>
  <div class="form-widget">
   <select id="quiz_course" name="quiz[course]" data-widget="select2" class="form-control">
    <option value="1">Year 10 Physics</option>
    <option value="2">Year 11 Physics</option>
   </select>
  </div>
 </div>
</div>

这里是可能相关的脚本。

<script src="/bundles/easyadmin/select2/i18n/en.js"></script>
<script type="text/javascript">
  $(function() 
    // Select2 widget is only enabled for the <select> elements which
    // explicitly ask for it

    function init() 
      $('form select[data-widget="select2"]').select2(
        theme: 'bootstrap',
        language: 'en'
      );
    

    $(document).on('easyadmin.collection.item-added', init);
    init();
  );
</script>

这是渲染下拉列表的图片：

【参考方案1】：

这是 2.1.2 版本中引入的错误。

https://github.com/EasyCorp/EasyAdminBundle/issues/2715

有一个新版本 2.1.3 解决了这个问题。

【讨论】：

Sweet...我也遇到了这个问题 :)