Set placeholder after select input was rendered

elsci-io · Aug 23, 2024 · bd335fb · bd335fb
1 parent aaa87c1
commit bd335fb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsci-io/ui-essential",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "Material Design components created for products built by elsci.io",
   "main": "src/index.js",
   "type": "module",

diff --git a/src/SelectInput/SelectInput.js b/src/SelectInput/SelectInput.js
@@ -1,4 +1,4 @@
-import {KeyCode, safeHtml} from "../utils.js";
+import {KeyCode} from "../utils.js";
 
 export default class SelectInput extends HTMLElement {
     #inputElement;
@@ -35,6 +35,11 @@ export default class SelectInput extends HTMLElement {
         this.#inputElement.setDisabled(isDisabled);
     }
 
+    /** @param {string} placeholderText */
+    setPlaceholder(placeholderText){
+        this.#inputElement.setPlaceholder(placeholderText);
+    }
+
     showDropdown() {
         this.#dropdownElement.show();
         this.#callbacks.onShowDropdown.forEach(callback => callback());

diff --git a/src/TextInput/TextInput.js b/src/TextInput/TextInput.js
@@ -1,6 +1,6 @@
 // @ts-check
 import TextInputValidityState from "./TextInputValidityState.js";
-import {isFiniteNumber, KeyCode, safeHtml} from "../utils.js"
+import {isFiniteNumber, KeyCode, safeHtml, safeText} from "../utils.js"
 
 /**
  * @typedef {import("../InputValidator.js").default} InputValidator
@@ -129,6 +129,12 @@ export default class TextInput extends HTMLElement {
         this.#inputElement.toggleAttribute("disabled", isDisabled);
     }
 
+    /** @param {string} placeholderText */
+    setPlaceholder(placeholderText){
+        this.#inputElement.setAttribute('placeholder', safeText(placeholderText));
+        this.classList.add("placeholder-shown");
+    }
+
     /** @param {KeyboardEvent} event */
     #onKeyDown(event) {
         if (this.#inputElement.type === "number" && (event.key === KeyCode.Up || event.key === KeyCode.Down))