I receive typeError when i close my modal

Topic: I receive typeError when i close my modal

renatoveronese free asked 5 years ago

I have one modal:

<div class="modal fade" id="modalPesquisa" tabindex="-1" data-backdrop="false" role="dialog">

  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Pesquisa de operadores</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>

          <div class="modal-body">
           ...

             <svg [class.disabled]="loadingfiltro" matTooltip="Editar operador" data-dismiss="modal" class="cursorPointer" (click)="editaOperador(operador)" fill="darkorange" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

When i click in the svg to close the modal i receive:

Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433)

I don't think idea about how this is happening.

My importations:

<body>

      <!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/js/mdb.min.js"></script>

  <app-root>
  </app-root>

</body>

Bartłomiej Malanowski staff commented 5 years ago

As I can see, you're trying to combine MDB jQuery with Angular. Am I right?

Add comment

renatoveronese free answered 5 years ago

0 0 Best answer

This is happening only in SVG. if i change my svg to a icon work normally.

This error only happens inside the modal.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: Desktop
Browser: Opera
OS: Windows 10
Provided sample code: No
Provided link: No

renatoveronese

45Support score
3Questions 3Answers 0Snippets