How to add id tag to a button when html attribute is missing

Developer Support
1

What are you trying to do?
Add id tag to button

What have you tried so far?
I tried clicking the button but the html attribute is missing.

image
image734Ă—849 51.5 KB

I seen this video of a user doing something and finding the html tag but I dont know what key they pressed

Relevant links:

2

Hi @anderson_pena

Unfortunately, we don’t support that currently for code components. We will add support for it soon.

1 Like
3

I see, thats unfortunate.
Could you at least tell me how to do it like yang did here on this video on the post I linked?

4

The HTML attributes such as id can be set on normal elements not on code components.

Following are the steps to add Id attribute to normal element:

  1. Add/Select a normal html element such as hstack, vstack, text etc
  2. It will show the HTML attribute section in the right settings panel.
  3. You can set the Id attribute from there. Additionally, if you are inside a normal component then you can link the Id attribute to external prop which will let you pass the value from the component instance.

You can a normal element and change it’s tag to button and attach id attribute using above steps.

5

@anderson_pena can you also share what you are trying to do with the id?

6

Im trying to write code into a button that will wait until the modal is fully rendered and then will autofocus an input field inside of said modal. And for that I need to assign an id to the open button to reference it on the code

    document.addEventListener("DOMContentLoaded", function() {
        const button = document.getElementById("***Here is where I would put the id of the button***");
        button.addEventListener("click", function() {
            
            document.querySelector(".ant-modal-content").style.display = "block";
            
            // Create an observer instance to watch for the input field
            const observer = new MutationObserver((mutationsList, observer) => {
                const input = document.getElementById("imei");
                if (input) {
                    input.focus();
                    // Once the input field is focused, disconnect the observer
                    observer.disconnect();
                }
            });

            // Start observing the modal content for child elements
            const config = { childList: true, subtree: true };
            observer.observe(document.querySelector(".ant-modal-content"), config);
        });
    });
7

For now, you will need to use some workarounds to target the element. For example, maybe you can wrap the button in a container, and set the id/className on the container. Then, you can target the button like #id button.

8

Sounds good, I’ll try that right away. Thanks