구체화: 드롭다운에서 null의 속성 'tabIndex'를 설정할 수 없습니다._make Dropdown Focusable(초점 설정 가능)

구체화: 드롭다운에서 null의 속성 'tabIndex'를 설정할 수 없습니다._make Dropdown Focusable(초점 설정 가능)

구체화 셀렉트를 포함한 농담을 통해 vuejs 컴포넌트를 테스트하려고 합니다.컴포넌트 테스트 실행 시 다음과 같은 에러가 발생합니다.js:

TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable

이 오류는 어떻게 해결합니까?

이 문제는 입력 필드가 클래스 입력 필드가 있는 div 안에 랩되어 있지 않은 경우에 발생할 수 있습니다.

  <div class="input-field">
    <input type="text" class="autocomplete"></input>
  </div>

클래스 "input-field"를 가진 div를 추가하면 이 문제가 해결될 수 있습니다.

클래스 셀렉터 대신 id selector를 사용합니다.예를 들어 다음과 같은 콜드롭다운이 있습니다.

html:

<a class='dropdown-trigger' id="dropdowner" href='#' data-target='dropdown1'>Drop Me!</a>

                         <!-- Dropdown Structure -->
                         <ul id='dropdown1' class='dropdown-content'>
                           <li><a href="#!">one</a></li>
                           <li><a href="#!">two</a></li>
                           <li class="divider" tabindex="-1"></li>
                           <li><a href="#!">three</a></li>
                           <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
                           <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
                         </ul>

js:

$('#dropdowner').dropdown();

• 한 번만 사용할 수 있습니다.
• data-target="name_target"을 반복하면 안 됩니다.

시험 1.❌

<nav>
  <div class="nav-wrapper">
    <ul class="right hide-on-med-and-down">
      <li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
 <li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>
  <!-- Dropdown Structure -->
<ul id="name_target1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
</ul>

시험2. ✔시험

<nav>   <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a class="dropdown-trigger" href="#!" data-target="name_target2">Dropdown<i enter code here class="material-icons right">arrow_drop_down</i></a></li>
    </ul>   </div> </nav>   <ul id="name_target2" class="dropdown-content">   <li><a href="#!">one</a></li>   <li><a href="#!">two</a></li> </ul>

이 문제에 부딪혔을 때 JS에서 전체 드롭다운 목록을 동적으로 작성하려고 했습니다.수정은 HTML에서 목록과 기본 목록 요소를 만드는 것이었습니다.

<div id="select1" class=\"input-field col s12\">
    <select>
        <option value="" selected>Default</option>
    </select>
    <label>Test</label>
</div>

그런 다음 JS에서 동적 값을 추가합니다.

contents.forEach(function(content) {
    var buffer = "<option></option>";
    var template = $(buffer);
    $(template).text(content);
    $("select1").find("select").append(template);
});

$("select").formSelect();

1.0.0 이전 버전에서는 data-target을 사용하지만 data-target이 지정되지 않으면 이 오류가 발생합니다.

문제는 jQuery 객체가 아직 DOM에 연결되어 있지 않기 때문에 ID로 요소를 찾을 수 없기 때문에 내부 머티리얼라이즈 코드가 요소를 초기화할 수 없다는 것입니다.

// materializecss initing dropdown (in my case for input autocomplete), where `t` is the input element
i.id = M.getIdFromTrigger(t),
i.dropdownEl = document.getElementById(i.id),
i.$dropdownEl = h(i.dropdownEl),

M.getIdFromTrigger(t)(제가 제공한 ID가 아닌) 랜덤 ID를 반환했습니다.dropdownElnull로 입력되었으며 이후 메서드_makeDropdownFocusable'this.dropdownEl.tabIndex = 0'을 사용하지 못했습니다.

문제 코드는 다음과 같습니다.

let root = $('#root'); // root in the DOM already
let wrapper = $('<div>'); // wrapper is just created and NOT attached to the DOM yet 
let input = $('<input>').appendTo(wrapper); // creating input and attaching to the wrapper, but still not in DOM
initAutocomplete(input) // M.Autocomplete.init logic here FAILS 
root.append(wrapper) // too late, error above

즉, M보다 먼저 요소를 추가하는 것이 빠른 해결책입니다.자동 완성.초기화

저도 Vue 프로젝트에서 Materializecss를 사용하다가 이 문제를 발견했습니다.sajjad에서 언급했듯이 클래스 대신 id selector를 사용하는 것이 좋습니다.단, 이는 여러 드롭다운을 초기화할 때 문제가 됩니다.각 드롭다운에는 일의의 ID가 필요하기 때문입니다.

이 문제를 해결하려면 '.dropdown-trigger' 클래스로 모든 요소를 선택하고 모든 요소를 초기화합니다.저는 좋아요.

$.each($('.dropdown-trigger'), function(index, value) {
        $(value).dropdown();
});

언급URL : https://stackoverflow.com/questions/54343172/materialize-cannot-set-property-tabindex-of-null-at-dropdown-makedropdownfoc