diff --git a/files/en-us/web/api/htmlinputelement/showpicker/index.md b/files/en-us/web/api/htmlinputelement/showpicker/index.md index 8f28e458ea73e41..e542871a02c27d0 100644 --- a/files/en-us/web/api/htmlinputelement/showpicker/index.md +++ b/files/en-us/web/api/htmlinputelement/showpicker/index.md @@ -171,5 +171,6 @@ button.addEventListener("click", () => { - {{ HTMLElement("input") }} - {{ domxref("HTMLInputElement") }} +- {{ domxref("HTMLSelectElement.showPicker()") }} - {{htmlelement("datalist")}} - [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) diff --git a/files/en-us/web/api/htmlselectelement/showpicker/index.md b/files/en-us/web/api/htmlselectelement/showpicker/index.md index 88aa1e36e2d3888..b1fadf39bd2b86a 100644 --- a/files/en-us/web/api/htmlselectelement/showpicker/index.md +++ b/files/en-us/web/api/htmlselectelement/showpicker/index.md @@ -39,7 +39,7 @@ None ({{jsxref("undefined")}}). - `SecurityError` {{domxref("DOMException")}} - : Thrown if called in a cross-origin iframe. -## Security Considerations +## Security considerations [Transient user activation](/en-US/docs/Web/Security/User_activation) is required. The user has to interact with the page or a UI element in order for this feature to work. @@ -48,7 +48,7 @@ The method is only allowed to be called in same-origin iframes; an exception is ## Examples -### Feature Detection +### Feature detection The code below shows how to check if `showPicker()` is supported: @@ -58,11 +58,9 @@ if ("showPicker" in HTMLSelectElement.prototype) { } ``` -### Usage +### Launching the picker -This example shows how this feature can be used. - -> **Note:** A live example cannot be shown here because they run in a cross-origin frame, and would cause a [`SecurityError`](#securityerror) +This example shows how to use a button to launch the picker for a `` element and calls `showPicker()` on it. ```js const button = document.querySelector("button"); @@ -92,6 +91,8 @@ button.addEventListener("click", (event) => { }); ``` + + ## Specifications {{Specifications}} @@ -104,3 +105,4 @@ button.addEventListener("click", (event) => { - {{ HTMLElement("select") }} - {{ domxref("HTMLSelectElement") }} +- {{ domxref("HTMLInputElement.showPicker()") }} diff --git a/files/en-us/web/security/user_activation/index.md b/files/en-us/web/security/user_activation/index.md index dd7e0eb771cd346..5f1a6b370e6ee94 100644 --- a/files/en-us/web/security/user_activation/index.md +++ b/files/en-us/web/security/user_activation/index.md @@ -38,6 +38,7 @@ APIs that require transient activation (list is not exhaustive): - {{domxref("GPUAdapter.requestAdapterInfo()")}} - {{domxref("HID.requestDevice()")}} - {{domxref("HTMLInputElement.showPicker()")}} +- {{domxref("HTMLSelectElement.showPicker()")}} - {{domxref("HTMLVideoElement.requestPictureInPicture()")}} - {{domxref("IdleDetector/requestPermission_static", "IdleDetector.requestPermission()")}} - {{domxref("MediaDevices.selectAudioOutput()")}} @@ -50,12 +51,12 @@ APIs that require transient activation (list is not exhaustive): - {{domxref("RemotePlayback.prompt()")}} - {{domxref("USB.requestDevice()")}} - {{domxref("Keyboard.lock()")}} +- {{domxref("Window.getScreenDetails()")}} - {{domxref("Window.open()")}} +- {{domxref("Window.queryLocalFonts()")}} - {{domxref("Window.showOpenFilePicker()")}} - {{domxref("Window.showSaveFilePicker()")}} - {{domxref("Window.showDirectoryPicker()")}} -- `Window.getScreenDetails()` -- {{domxref("Window.queryLocalFonts()")}} - {{domxref("XRSystem.requestSession()")}} ## Sticky activation