Always clear global anchors for dropdown

Author: lucsoft

src/components/FormInputs.ts

@@ -91,9 +91,9 @@ export class DropDownInputComponent<Value extends string> extends InputForm<Valu
         });
 
         this.button.onClick(() => {
-            this.wrapper.append(dropDownPopover.draw());
-            dropDownPopover.showPopover();
+            dropDownPopover.clearAnchors("--wdropdown-default");
             this.button.setAnchorName("--wdropdown-default");
+            dropDownPopover.showPopover();
             content.setValue(Grid(
                 Items(asRef(dropdown), item =>
                     Button(item)

src/components/Popover.ts

@@ -7,6 +7,7 @@ export const Popover = (content: Component) => new class extends Component {
         this.addClass("wpopover");
         this.wrapper.append(content.draw());
         this.setAttribute("popover");
+        document.body.append(this.draw());
     }
 
     public showPopover() {
@@ -33,6 +34,11 @@ export const Popover = (content: Component) => new class extends Component {
         return this;
     };
 
+    public clearAnchors(anchorName: `--${string}`) {
+        const anchors = document.querySelectorAll(`[anchor="${anchorName}"]`);
+        anchors.forEach(anchor => anchor.removeAttribute("anchor"));
+        return this;
+    }
     public pullingAnchorPositioning(anchorName: `--${string}`, positioning: (rect: DOMRect, style: CSSStyleDeclaration) => void, interval = 20) {
         setInterval(() => {
             const anchor = document.querySelector(`[anchor="${anchorName}"]`);