jQueryui menu bug

Demonstrate a bug with jQueryui menu : the submenus are not positionned correctly on first try. It takes 4 tries for them to be positionned correctly.

by tcharlss

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/menu.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/all.css">
<div class="container">
	<ul class="menu">
			<li>
				<div class="open">
						Menu
				</div>
				<ul>
					<li>
						<a href="#">
							Sunt nemo corporis eum
						</a>
					</li>
					<li>
						<a href="#">
							Quo omnis quo qui tenetur rerum sed ea
						</a>
					</li>
          <li class="groupe">
            <a href="#">
              Repudiandae rerum minus et nesciunt aut iste
            </a>
          </li>
				</ul>
		  </li>
	  </ul>
</div>

<p class="message">
This submenu will only be correctly positionned on the 5th try
</p>

<div class="container">
	<ul class="menu">
			<li>
				<div class="open">
						Menu
				</div>
				<ul>
					<li>
						<a href="#">
							Sunt
						</a>
					</li>
					<li>
						<a href="#">
							Quo
						</a>
					</li>
          <li class="groupe">
            <a href="#">
              Repudiandae
            </a>
          </li>
				</ul>
		  </li>
	  </ul>
</div>

<p class="message">
This submenu works fine
</p>

CSS

.container {
  display: flex;
  justify-content: flex-end;
  border: 2px solid red;
}

.open {
  padding: 1em;
}

.menu a {
  display: block;
}

JavaScript

$( function() {
		$( ".menu" ).menu();
	});