JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui fluid search selection dropdown">
<input name="organization" type="hidden">
<input class="search" autocomplete="off" tabindex="0"><span class="text"></span>
<div class="menu transition hidden" tabindex="-1">
<div class="item" data-text="';alert(String.fromCharCode(88,83,83))//';alert(String.fromCharCode(88,83,83))//"; alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//-- ></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT>">
';alert(String.fromCharCode(88,83,83))//';alert(String.fromCharCode(88,83,83))//"; alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//-- ></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT>
</div>
</div>
</div>
<div class="ui fluid search selection dropdown">
<input name="organization" type="hidden">
<input class="search" autocomplete="off" tabindex="0"><span class="text"></span>
<div class="menu transition hidden" tabindex="-1">
<div class="item">
';alert(String.fromCharCode(88,83,83))//';alert(String.fromCharCode(88,83,83))//"; alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//-- ></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT>
</div>
</div>
</div>
CSS
body {
padding: 1em;
}
JavaScript
// Override jQuery's `data()` function to snoop for Semantic-UI calls.
const { data } = $.fn;
$.fn.data = function (...args) {
if (args[0] === 'module-dropdown' && args[1]) {
// Semantic-UI uses a data set call to store its dropdown instance.
// This provides us a places to hook-in and apply text escaping.
const instance = args[1];
const setText = instance.set.text;
instance.set.text = function (t) {
return setText.call(this, instance.escape.string(t));
};
}
return data.call(this, ...args);
};
$('.ui.dropdown.selection').dropdown();