1

I'm trying to insert a simple dropdown control into an xhtml page. I'm using bootrap 4.0.

FYI: the following peace of code is working fine on html, it does not work expand on xhtml. Also it works fine both html and xhtml using bootstrap 3.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" 


href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</head>
<body>

<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
  Dropdown button
</button>
   <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Link 1</a>
     <a class="dropdown-item" href="#">Link 2</a>
     <a class="dropdown-item" href="#">Link 3</a>
   </div>
</div>
</div>

</body>
</html>

Any idea? Thank you

Alohci
  • 78,296
  • 16
  • 112
  • 156
Geanni
  • 33
  • 4

1 Answers1

2

These are bugs in popper.js.

In various places, popper.js compares the node name of elements to "HTML" and "BODY".

In XHTML, the node names aren't "HTML" and "BODY", they're "html" and "body" - i.e. lower case. So they don't match and the JS code gets stuck in an infinite loop (among probably other problems).

Bootstrap 3 used "tether" rather than "popper" which presumably did not have the equivalent bugs.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Can you call it a bug if it simply doesn't work in an environment it wasn't designed for? – Mr Lister Jan 30 '18 at 07:16
  • @MrLister - That's a fair question. It feels like a bug to me because (a) JS really operates on a DOM document, not a markup syntax and (b) because the fix for the "bug" is pretty trivial. But yes, it could be reasonably claimed to be outside the scope of its design. – Alohci Jan 30 '18 at 07:26
  • In general, testing node names makes for fragile code. There's no guarantee that they'll only be one HTML element and one BODY element even in an HTML document once JS starts operating on it. A better approach would be to compare the element against document.documentElement and document.body, since that's what the popper code is really looking for. – Alohci Jan 30 '18 at 07:37