JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<select multiple="" name="productIds" class="ui search multiple dropdown"></select>

CSS

body {
    padding: 1em;
}

JavaScript

// example to show semantic ui cannot set values to a select.ui.dropdown element


// does not work:
$("[name=productIds]").dropdown("set selected", "2");

setTimeout(function() {
    $("[name=productIds]").html(
        '<option value="1">test1</option>' +
        '<option value="2">test2</option>' +
        '<option value="3">test3</option>'
    );
    
	
  
  // does not work:
	$("[name=productIds]").dropdown("refresh");
  $("[name=productIds]").dropdown("set selected", "3"); 
  
  // does not work neither:
  $("[name=productIds]").dropdown("refresh")
  $("[name=productIds]").dropdown("set selected", ["2", "3"]); 

	
  // tried to use the dynamic wrapper dom element as well:
	// does not work:
  $("selection ui dropdown multiple").dropdown("refresh");
  $("selection ui dropdown multiple").dropdown("set selected", "3"); 
  
	// does not work neither:
  $("selection ui dropdown multiple").dropdown("refresh");
  $("selection ui dropdown multiple").dropdown("set selected", ["2", "3"]); 
  
  // works:
  setTimeout(function() {
		$("[name=productIds]").dropdown("refresh");
	  $("[name=productIds]").dropdown("set selected", "3"); 
  }, 1000);
    
}, 1000);