@wikimedia/codex/dist/sandbox/assets/popoverBug-CGzPuuTq.js

Codex Design System for Wikimedia

import{d as c,r as a,f as x,o as C,w as u,e as o,j as r,q as i,ae as s,am as g,aN as k,aO as V}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWG_HZgx.js";import"./TypeaheadSearch.vue_vue_type_style_index_0_lang-guaG63gZ.js";import{C as w}from"./TextInput-BPNpai4v.js";import{C as v}from"./Popover-BN9HEI-a.js";import"./floating-ui.vue-VTEv9orc.js";import"./floating-ui.dom-CMj0Z5yx.js";const B={id:"center"},P=c({__name:"PopoverBug",setup(T){const p=a("2. Click to focus this field"),n=a(!1),l=a(!1),d=a(),f=a(),m={label:"Cancel"},b=function(){l.value=!0};return(N,e)=>(C(),x(k,{class:"cdx-button-grid"},{header:u(()=>e[8]||(e[8]=[i(" Codex Button Grid ")])),content:u(()=>[o("section",B,[o("div",null,[e[12]||(e[12]=o("h1",null,[i("Reproduction of "),o("a",{href:"https://phabricator.wikimedia.org/T424313"},"T424313")],-1)),o("div",null,[r(s(g),{ref_key:"triggerElement",ref:d,modelValue:n.value,"onUpdate:modelValue":e[0]||(e[0]=t=>n.value=t),"aria-label":"Alert notification"},{default:u(()=>e[9]||(e[9]=[i(" 1. Click to open the popup ")])),_:1,__:[9]},8,["modelValue"]),e[10]||(e[10]=o("div",null,[o("p",null,"STR: Click the button to open the pop-up, and then click inside the input field to focus it and trigger a second pop-up"),o("p",null,"Observe that with v2.4.0, the input field is focussed on click and the pop-up can be dismissed. "),o("p",null,"Observe that with v2.5.0, the input field requires two clicks to focus and the pop-up cannot be dismissed. ")],-1))]),r(s(v),{open:n.value,"onUpdate:open":e[5]||(e[5]=t=>n.value=t),anchor:d.value,placement:"bottom-start","render-in-place":!0,title:"First popup","use-close-button":!0,"default-action":m,onPrimary:e[6]||(e[6]=t=>n.value=!1),onDefault:e[7]||(e[7]=t=>n.value=!1)},{default:u(()=>[r(s(w),{ref_key:"textInput",ref:f,modelValue:p.value,"onUpdate:modelValue":e[1]||(e[1]=t=>p.value=t),onFocus:b},null,8,["modelValue"]),r(s(v),{open:l.value,"onUpdate:open":e[2]||(e[2]=t=>l.value=t),anchor:f.value,placement:"bottom-start","render-in-place":!0,title:"A nested popup","use-close-button":!0,"default-action":m,onPrimary:e[3]||(e[3]=t=>l.value=!1),onDefault:e[4]||(e[4]=t=>l.value=!1)},{default:u(()=>e[11]||(e[11]=[o("div",null,[o("p",null,"Hard to close with codex v2.5.0")],-1)])),_:1,__:[11]},8,["open","anchor"])]),_:1},8,["open","anchor"])])])]),_:1}))}});V(P).mount("#app");