Merge pull request #3348 from thornbill/fix-react-emby-select

Fix unstyled emby-select field when rendered with React

src/components/dashboard/users/SelectSyncPlayAccessElement.tsx

@@ -3,7 +3,7 @@ import globalize from '../../../scripts/globalize';
 
 const createSelectElement = ({ className, id, label }) => ({
     __html: `<select
-        className="${className}"
+        class="${className}"
         is="emby-select"
         id="${id}"
         label="${label}"

src/elements/emby-select/emby-select.js

@@ -138,15 +138,15 @@ import 'webcomponents.js/webcomponents-lite';
         label.innerHTML = this.getAttribute('label') || '';
         label.classList.add('selectLabel');
         label.htmlFor = this.id;
-        this.parentNode.insertBefore(label, this);
+        this.parentNode?.insertBefore(label, this);
 
         if (this.classList.contains('emby-select-withcolor')) {
-            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;display:none;">0</div><span class="selectArrow material-icons keyboard_arrow_down"></span></div>');
+            this.parentNode?.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;display:none;">0</div><span class="selectArrow material-icons keyboard_arrow_down"></span></div>');
         }
     };
 
     EmbySelectPrototype.setLabel = function (text) {
-        const label = this.parentNode.querySelector('label');
+        const label = this.parentNode?.querySelector('label');
 
         label.innerHTML = text;
     };