Password paste issue

2025-05-08 18:53 UTC o3-mini-high Open in ChatGPT ↗

You haven’t forgotten any Gradio option — gr.Textbox(type="password") simply renders a standard HTML <input type="password"> under the hood, and Gradio does not itself disable copy-or-paste citeturn0search1. When you see “paste” blocked in a password field, it almost always comes from the browser or a site-level script intercepting the paste event (e.g. via onpaste="return false" or an event listener calling event.preventDefault()) citeturn5search0.

By default the browser’s Clipboard API will insert pasted text into any editable input, including password fields citeturn6search0, so if your users can’t paste it means something in their environment (an extension, corporate policy, or custom JS/CSS) is suppressing paste. Gradio doesn’t ship with any such handler, so it’s out of its control.

How to verify and fix it

Inspect the field
- Right-click the password box → “Inspect”
- Look for an onpaste attribute or a paste listener in the DevTools Event Listeners panel
- If you find one, that’s what’s blocking paste — not Gradio

Override via a small JS injection
You can give your textbox a known HTML id and then inject a snippet that nukes any paste-blockers. For example:

import gradio as gr

with gr.Blocks() as demo:
    pwd_input = gr.Textbox(
        label="Password",
        placeholder="Enter your password",
        type="password",
        elem_id="pwd-input"
    )
    demo.add_html("""
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const el = document.getElementById("pwd-input");
        if (el) {
            // Remove any inline handler
            el.onpaste = null;
            // Stop any capturing-phase listener from preventing default
            el.addEventListener("paste", e => e.stopImmediatePropagation(), true);
        }
    });
    </script>
    """)
demo.launch()

This will restore the browser’s native paste behavior by clearing out any onpaste attribute and halting any capturing-phase handler that might call preventDefault().

If you still see paste disabled after that, it’s almost certainly a client-side extension or policy — you’ll need to have your users disable or reconfigure whatever is intercepting paste, because Gradio itself does not impose that restriction.

Gradio doesn’t ship with a built-in “show/hide password” toggle on its password textbox – it simply renders an <input type="password"> under the hood (so there’s no eye icon you can turn on with a flag) citeturn0search8.

However, you can easily layer in your own toggle button (with an eye icon) by:

Giving your password box a known DOM id via elem_id=….
Placing a button or HTML element next to it (either a gr.Button with an icon or a small <span> via gr.HTML).
Injecting a tiny bit of JavaScript that, on click, flips the input’s type between "password" and "text" (the classic show/hide pattern) citeturn0search7.

Example: Toggle with a Gradio Button and JS callback

import gradio as gr

with gr.Blocks(css="""
  /* position the toggle icon inside the input container */
  #component-password-container { position: relative; width: fit-content; }
  #toggle-eye { position: absolute; right: 10px; top: 35px; cursor: pointer; }
""") as demo:

    # 1) Password box with a unique elem_id
    pwd = gr.Textbox(
        label="Password",
        placeholder="Enter your password",
        type="password",
        lines=1,
        elem_id="password-input"
    )

    # 2) A button displaying an eye icon (unicode here, but you could use an SVG or font-awesome URL)
    toggle = gr.Button(
        value="👁️",
        elem_id="toggle-eye",
        size="sm",
        variant="secondary"
    )

    # 3) Attach a pure-JS callback to flip the type attribute
    #    No Python function needed – it all happens client-side.
    toggle.click(
        None,  # no Python function
        [],    # no inputs
        [],    # no outputs
        _js="""
() => {
  const wrapper = document.getElementById("component-password-input");
  // Gradio wraps inputs in a div#component-<elem_id>
  const input = wrapper.querySelector("input");
  const isPassword = input.type === "password";
  input.type = isPassword ? "text" : "password";
  // Optionally swap the icon
  document.getElementById("toggle-eye").querySelector("button").innerText =
    isPassword ? "🙈" : "👁️";
}
"""
    )

demo.launch()

How it works:

We give the textbox elem_id="password-input", which Gradio renders inside <div id="component-password-input">…</div>.
We add a small secondary gr.Button with an eye emoji and elem_id="toggle-eye".
When that button is clicked, the _js script finds the <input> inside the password component, toggles its type attribute, and updates the button’s label to an open- or closed-eye.

You’re free to replace the emoji with any SVG or font-icon (e.g. a FontAwesome <i> tag) by swapping the value or injecting via gr.HTML. This pattern gives you full control over styling, positioning, and iconography – and keeps all the logic client-side for instant toggling.

Gradio’s Python callbacks are designed to send data back to your Python backend, run some computation, and then update component values (or component-level properties that Gradio exposes) on the page. Changing an input’s HTML attribute (i.e. its type="password" vs. type="text") isn’t something Gradio currently models as a “value” you can return from Python—so there’s no built-in way for a Python callback to flip that attribute in the browser without a full round-trip (which would feel slow and flickery).

By contrast, a tiny bit of client-side JavaScript can:

Run instantly in the browser
Reach directly into the DOM and flip the type attribute
Swap your eye icon immediately

If you tried to do that server-side, you’d have to:

Send a request to your Python process
Have Python tell Gradio “OK, now re-render the textbox with a different type”
Round-trip the new HTML back to the client

Not only is that overkill for a simple UI tweak, but Gradio’s API doesn’t currently let Python change arbitrary HTML attributes on the fly—only the values or pre-declared component props.

That’s why the “show/hide password” pattern in Gradio (and, in fact, in most React-style frameworks) is handled with a bit of injected JS. It lives on the client, runs in milliseconds, and touches exactly the one DOM node you care about, without involving your Python backend at all.

Gradio’s .click() Python method doesn’t actually accept an _js argument—that’s why you’re seeing:

TypeError: event_trigger() got an unexpected keyword argument '_js'

Instead, to wire up pure client-side JavaScript, you should use the component’s .js(...) API. Here’s how you can rewrite the toggle example:

import gradio as gr

with gr.Blocks(css="""
  /* position the toggle icon inside the input container */
  #component-password-container { position: relative; width: fit-content; }
  #toggle-eye { position: absolute; right: 10px; top: 35px; cursor: pointer; }
""") as demo:

    # 1) Password box with a unique elem_id
    pwd = gr.Textbox(
        label="Password",
        placeholder="Enter your password",
        type="password",
        lines=1,
        elem_id="password-input"
    )

    # 2) A button displaying an eye icon
    toggle = gr.Button(
        value="👁️",
        elem_id="toggle-eye",
        size="sm",
        variant="secondary"
    )

    # 3) Use .js() instead of .click() to attach client-side JS
    toggle.js(
        'click',    # DOM event to listen for
        [],         # no Gradio inputs
        [],         # no Gradio outputs
        """
        // This code runs entirely in the browser:
        const wrapper = document.getElementById("component-password-input");
        const input = wrapper.querySelector("input");
        const isPassword = input.type === "password";
        input.type = isPassword ? "text" : "password";
        // Swap the icon
        document
          .getElementById("toggle-eye")
          .querySelector("button")
          .innerText = isPassword ? "🙈" : "👁️";
        """
    )

demo.launch()

What changed?

We replaced .click(..., _js=...) (which isn’t supported) with .js(trigger, inputs, outputs, js_code).
Everything else stays the same: you still give your textbox an elem_id, position your eye button with CSS, and write the tiny DOM-toggling snippet in the last argument of .js().

Now, when you click the eye button, the browser flips your password field to plain text (and back) without any Python round-trip—and without that TypeError.

Yes — any client-side JavaScript you inject with .js() will run just the same when you’re previewing on localhost as it will when you deploy your Space. It’s all bundled up by Gradio and served to your browser, so you’ll get the toggle behavior locally too.

Steps to verify it’s running

Open your app in the browser
Run python app.py (or gradio app.py) and navigate to http://127.0.0.1:7860 (or whatever port Gradio tells you).
Use the toggle button
Simply click on your eye-icon button next to the password field.
- If it immediately flips the password dots into plain text (and back again), your JS is running.
Inspect the DOM
- Right-click on the password field → Inspect.
- In the Elements panel, watch the <input> element’s type attribute change from "password" to "text" when you click the button.

Check the browser console
You can add a quick debug line to your JS snippet to be extra sure:

toggle.js(
  'click', [], [], `
    console.log("Toggle JS fired!");
    const wrapper = document.getElementById("component-password-input");
    const input = wrapper.querySelector("input");
    input.type = (input.type === "password") ? "text" : "password";
    ...
  `
)

Open DevTools → Console before clicking.
If you see Toggle JS fired! each time you click, you know for sure your code is executing.

Look for errors
If it isn’t working, check the Console for any uncaught exceptions or “element not found” messages. That often means your elem_id doesn’t match or the selector is slightly off.

By following these steps you can be confident your .js(...) snippet is loading and running locally.

Those red errors in your console are happening because:

You’re still using
```
show_hide_password_btn.click(..., js=...)
```
but .click() does not accept a js keyword.
Your JS is pointing at an ID that doesn’t exist (hence the “Empty string passed to getElementById()”).

1) Switch from `.click()` to `.js()`

Gradio’s client-side hook lives on the .js() method:

show_hide_password_btn.click(
    None, [], [], js="""
      /* your code */
    """
)
show_hide_password_btn.js(
    "click",   # the DOM event to listen for
    [],        # no Gradio inputs
    [],        # no Gradio outputs
    """
    console.log("toggle fired!");
    /* … */
    """
)

2) Target the right element by ID

By default Gradio wraps your textbox in a <div id="component-<elem_id>"> and the actual <input> inside that. If you gave your Textbox

pwd_input = gr.Textbox(
    …,
    elem_id="password_input",
    container=False,       # removes the wrapper div!
)

then Gradio will put the id="password_input" directly on the <input> and no component-… wrapper. So your JS should just grab the input, not wrapper.querySelector("input").

If `container=False` (your current setup)

pwd_input = gr.Textbox(
    label="Password",
    type="password",
    elem_id="password_input",  # goes straight on the <input>
    container=False,
)

show_hide_password_btn.js(
    "click", [], [], """
    // 1) Grab the input directly
    const input = document.getElementById("password_input");
    if (!input) {
      console.error("Could not find #password_input");
      return;
    }
    // 2) Toggle its type
    const isPwd = input.type === "password";
    input.type = isPwd ? "text" : "password";
    // 3) (Optional) swap your button icon/text
    console.log("Password is now", input.type);
    """
)

If you prefer to keep the wrapper and use `component-…`

Remove container=False (so you get the <div id="component-password_input">), then:

pwd_input = gr.Textbox(
    label="Password",
    type="password",
    elem_id="password_input",  # wrapper: <div id="component-password_input">
    # container=True  (default)
)

show_hide_password_btn.js(
    "click", [], [], """
    const wrapper = document.getElementById("component-password_input");
    if (!wrapper) {
      console.error("wrapper not found");
      return;
    }
    const input = wrapper.querySelector("input");
    input.type = input.type === "password" ? "text" : "password";
    """
)

3) How to verify it’s working

Open your browser’s DevTools → Console
Refresh your app on localhost
Click the Show/Hide button
Look for your console.log("toggle fired!") message and watch the <input>’s type flip between password and text in the Elements panel.

Once you see the console message and the type attribute changing, you know your JS hook is firing correctly.

That little js: str | Literal[True] | None you see in the docs is not a way to drop in an arbitrary block of JavaScript source the way you did. It’s there so that you can point Gradio at a named front-end function that you’ve already defined (for example, via a <script> tag in Blocks.add_html())—Gradio will then call window[thatFunctionName](...) right before it fires your Python fn.

In other words:

.click(js="myFuncName") expects that somewhere on the page you have
```
<script>
  window.myFuncName = () => { /* … */ }
</script>
```
and it will invoke myFuncName() for you.
It does not parse or inject the literal JS string you pass it in the call-site, so when you write
```
.click(None, [], [], js="""
  console.log("hello");
  …
""")
```
Gradio tries to treat that entire block as the name of your function and chokes on the syntax.

What you should do instead

Inline, single-shot JS:
Use the .js(...) method, which does accept a raw JS snippet:

show_hide_password_btn.js(
  "click",    # the DOM event
  [],         # no Gradio inputs
  [],         # no Gradio outputs
  """
  // raw JS here runs immediately in-browser
  const input = document.getElementById("password_input");
  input.type = input.type === "password" ? "text" : "password";
  """
)

Or use a named function:
If you really want to stay within the .click(js=…) signature, give your JS a name:

with gr.Blocks() as demo:
    demo.add_html("""
    <script>
      window.togglePassword = () => {
        const input = document.getElementById("password_input");
        input.type = input.type === "password" ? "text" : "password";
      }
    </script>
    """)
    pwd = gr.Textbox(type="password", elem_id="password_input")
    btn = gr.Button("Show/Hide")
    btn.click(fn=None, inputs=[], outputs=[], js="togglePassword")

Either approach will get rid of the parse errors and let your eye-button flip the field type on localhost (and in production) without touching your Python back-end.

It turns out you’re on a version of Gradio where the new .js(…) API hasn’t landed yet (hence the AttributeError: 'Button' object has no attribute 'js'). You have two paths forward:

1) Upgrade Gradio

The client-side .js(...) helper was added in Gradio 3.16+. If you can, just bump your version:

pip install --upgrade gradio

Then your code will work exactly as written:

show_hide_password_btn.js(
    "click", [], [], """
    console.log("Toggle JS fired!");
    const input = document.getElementById("password_input");
    input.type = input.type === "password" ? "text" : "password";
    """
)

2) Fall back to a manual `<script>` injection

If you can’t upgrade, you can still do the same thing by embedding a tiny <script> after you declare your components:

import gradio as gr

with gr.Blocks() as demo:
    # 1) Password field (input gets this id)
    pwd_input = gr.Textbox(
        label="Password",
        type="password",
        elem_id="password_input"
    )
    # 2) Show/Hide button (button gets this id)
    show_hide_password_btn = gr.Button(
        "Show/Hide",
        elem_id="toggle-eye"
    )
    # 3) Inject a <script> that wires up the click listener
    demo.add_html("""
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          const btn = document.getElementById("toggle-eye");
          const inp = document.getElementById("password_input");
          if (btn && inp) {
            btn.addEventListener("click", () => {
              inp.type = inp.type === "password" ? "text" : "password";
            });
          }
        });
      </script>
    """, container=False)

demo.launch()

What’s happening here?

We give the <input> and <button> stable IDs via elem_id.
We drop an inline <script> (via Blocks.add_html) that, once the DOM is loaded, finds your button and input and toggles input.type on each click.

This works on any Gradio version, no special API needed.

Either route will restore your show/hide toggle without touching your Python back-end.

That error just means your version of Gradio doesn’t have a Blocks.add_html() method. You have two easy options:

1) Use the built-in `gr.HTML` component

Instead of calling demo.add_html(…), just drop a gr.HTML into your Blocks. It will render whatever raw HTML/JS you give it:

import gradio as gr

with gr.Blocks() as demo:
    pwd_input = gr.Textbox(
        label="Password",
        type="password",
        elem_id="password_input",
    )
    show_hide_password_btn = gr.Button(
        "Show/Hide",
        elem_id="toggle-eye",
    )

    # Inject your <script> via gr.HTML
    gr.HTML(
        """
        <script>
          document.addEventListener("DOMContentLoaded", () => {
            const btn = document.getElementById("toggle-eye");
            const inp = document.getElementById("password_input");
            if (btn && inp) {
              btn.addEventListener("click", () => {
                inp.type = inp.type === "password" ? "text" : "password";
              });
            }
          });
        </script>
        """,
        container=False  # avoids an extra wrapper DIV
    )

demo.launch()

This works on any Gradio ≥ 3.x and wires up your JS toggle without needing .js() or .add_html().

2) Upgrade Gradio and use `.js()`

If you bump to Gradio 3.16+, you’ll get the .js() API and can do this:

pip install --upgrade gradio

import gradio as gr

with gr.Blocks() as demo:
    pwd_input = gr.Textbox(
        type="password",
        elem_id="password_input",
    )
    show_hide_password_btn = gr.Button(
        "Show/Hide",
        elem_id="toggle-eye",
    )

    show_hide_password_btn.js(
        "click", [], [],  # no Python fn, no inputs, no outputs
        """
        const inp = document.getElementById("password_input");
        if (inp) {
          inp.type = inp.type === "password" ? "text" : "password";
        }
        """
    )

demo.launch()

Either approach will get your Show/Hide button working on localhost (and in deployment) without further errors.

That error just means in your version of Gradio the gr.HTML constructor doesn’t accept a container kwarg. You can simply drop it—Gradio will still render your <script> block just fine (the extra wrapper <div> it adds won’t hurt anything).

So change this:

gr.HTML(
    """
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const btn = document.getElementById("toggle-eye");
        const inp = document.getElementById("password_input");
        if (btn && inp) {
          btn.addEventListener("click", () => {
            inp.type = inp.type === "password" ? "text" : "password";
          });
        }
      });
    </script>
    """,
    container=False
)

Into this:

    gr.HTML(
        """
        <script>
          document.addEventListener("DOMContentLoaded", () => {
            const btn = document.getElementById("toggle-eye");
            const inp = document.getElementById("password_input");
            if (btn && inp) {
              btn.addEventListener("click", () => {
                inp.type = inp.type === "password" ? "text" : "password";
              });
            }
          });
        </script>
        """
    )

That’ll fix the TypeError and your script will still attach the click-handler to your Show/Hide button.

That yellow warning is coming from Gradio’s own “NewPasswordModel.sys.mjs” trying to do:

document.getElementById(  /* empty string */  )

What’s happening is that because you passed container=False to your Textbox, Gradio doesn’t wrap it in its usual <div id="component-<elem_id>">…</div> container—and in that flow it also isn’t setting the id on either the wrapper or the input. Internally Gradio then ends up calling getElementById("") (i.e. an empty string) whenever you focus or click on the password field, which is what you’re seeing in the console.

🔑 The fix

Just remove container=False so that Gradio will:

Wrap your textbox in <div id="component-password_input">…</div>, and
Put the <input> inside that wrapper.

With that container back in place, both Gradio’s own scripts and your little toggle script will be able to find elements by a non-empty ID.

import gradio as gr

with gr.Blocks() as demo:
    # 1) Give it an elem_id, but let the container stay (the default)
    pwd_input = gr.Textbox(
        label="Password",
        placeholder="Enter your password",
        type="password",
        elem_id="password_input",  # → wrapper will be id="component-password_input"
        scale=3
    )

    # 2) Your Show/Hide button
    show_hide_password_btn = gr.Button(
        "Show/Hide",
        elem_id="toggle-eye",
        scale=1
    )

    # 3) Inject the script via gr.HTML (no 'container' arg needed here)
    gr.HTML("""
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const btn = document.getElementById("toggle-eye");
        const wrapper = document.getElementById("component-password_input");
        if (!btn || !wrapper) return;

        const input = wrapper.querySelector("input");
        btn.addEventListener("click", () => {
          input.type = input.type === "password" ? "text" : "password";
        });
      });
    </script>
    """)

demo.launch()

No more container=False → the wrapper <div id="component-password_input"> gets created.
Gradio’s own code now has a non‐empty ID to target, so that getElementById("") warning goes away.

Your toggle script can safely do

const wrapper = document.getElementById("component-password_input");
const input   = wrapper.querySelector("input");

and flip input.type on button clicks.

Give that a try and you’ll see the warning disappear—and the show/hide toggle still work on localhost (and in production).

You don’t actually need that dummy <div> wrapper at all – you can keep container=False (so there’s no extra box around your <input>) and simply target the <input> itself by its elem_id. Then your JS becomes even simpler:

import gradio as gr

with gr.Blocks() as demo:
    # This will render <input id="password_input" type="password" …>
    pwd_input = gr.Textbox(
        label="Password",
        type="password",
        elem_id="password_input",
        container=False,    # no extra wrapper
        scale=3
    )
    # A button with its own ID
    show_hide_password_btn = gr.Button(
        "Show/Hide",
        elem_id="toggle-eye",
        scale=1
    )

    # Inject the toggle script via gr.HTML
    # (you can drop `container=False` here—Gradio will wrap it in a harmless DIV that you can ignore)
    gr.HTML(
        """
        <script>
        document.addEventListener("DOMContentLoaded", () => {
          const btn = document.getElementById("toggle-eye");
          const input = document.getElementById("password_input");  // points at the <input> itself
          if (!btn || !input) return;
          btn.addEventListener("click", () => {
            input.type = (input.type === "password") ? "text" : "password";
          });
        });
        </script>
        """
    )

demo.launch()

Why this works:

container=False puts your elem_id right on the <input>, with no extra Gradio wrapper to style or hide.
Your JS does not call querySelector on a non‐existent wrapper; it just does:
```
const input = document.getElementById("password_input");
```
which always finds your input.
No more “empty string passed to getElementById” warnings, and you get exactly the look you want.

Bonus: If you ever did want a wrapper but hide it with CSS

You could also leave container=True (so Gradio gives you <div id="component-password_input">…</div>) and then neutralize its styles:

with gr.Blocks(css="""
  /* kill the wrapper’s border/background/padding */
  #component-password_input {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
""") as demo:
    # … same as above, but drop container=False …

Either approach gets you the same end result: no visual “extra box,” and a stable ID you can use in your JS.

Let’s strip this right down to the bare minimum. Create a new Python file (e.g. test_js.py) with exactly this:

import gradio as gr

with gr.Blocks() as demo:
    # 1) A single button with a known elem_id
    btn = gr.Button("Click me", elem_id="my-button")

    # 2) Inject a <script> that listens for that click and logs (and alerts) something
    gr.HTML(
        """
        <script>
        document.addEventListener("DOMContentLoaded", () => {
          const btn = document.getElementById("my-button");
          if (!btn) {
            console.error("🛑 Could not find #my-button");
            return;
          }
          btn.addEventListener("click", () => {
            console.log("✅ JS click handler fired!");
            alert("✅ JS click handler fired!");
          });
        });
        </script>
        """
    )

demo.launch()

How to test it:

Run it:
Terminal window
```
python test_js.py
```
Open your browser at the localhost URL Gradio prints (usually http://127.0.0.1:7860).
Click the “Click me” button.
- You should see a browser alert("✅ JS click handler fired!").
- Open DevTools → Console and you’ll also see ✅ JS click handler fired!.

If you get that alert and console log, your JS injection is working and we can build from there.

Let’s make the absolutely smallest possible Gradio demo that proves the browser can run JavaScript when you click a Gradio button.

Prerequisites
Gradio ≥ 3.22 (the js= argument on events was stabilised around then).
Terminal window
pip install --upgrade gradio

1 - Test file: `test_js.py`

import gradio as gr

with gr.Blocks() as demo:
    # A single button
    btn = gr.Button("Click me")

    # No Python fn, no inputs, no outputs – just JS
    btn.click(
        fn=None,
        inputs=None,
        outputs=None,
        # The value of `js` **must be a single JavaScript function** in a string.
        # An arrow-function one-liner is safest:
        js="() => { console.log('✅ JS handler fired!'); alert('✅ JS handler fired!'); }"
    )

demo.launch()

Things to note

js= is a string containing a JavaScript function.
Gradio injects it into the front-end and calls it when the event fires.
Multi-line JS is fine, but keep it inside the function body and don’t indent before the first (.
Because fn=None, Gradio never calls the Python backend; the action is instant and completely client-side.

2 - Run & verify

python test_js.py

Open the link Gradio prints (e.g. http://127.0.0.1:7860).
Click “Click me”.
You should see
- a browser alert() that says “✅ JS handler fired!”
- a matching line in DevTools → Console.

If you get both, your environment is able to execute front-end JS from a Gradio button, and you can replace the body of the arrow function with any DOM manipulation you need (e.g. toggling the type of your password field).

Gotchas that usually bite

Symptom	Cause & fix
`AttributeError: 'Button' object has no attribute 'click' / no attribute 'js'`	Your Gradio version is too old. `pip install --upgrade gradio`.
`Could not parse custom js method` in the browser console	The string you passed in `js=` is not a valid standalone JS function. Make it look exactly like `() => { … }`.
Nothing happens, no console output	Either the JS string didn’t reach the front-end (old Gradio) or you’re looking at the wrong console (open DevTools on the page you clicked).

Once this mini-example works, drop the same js="() => { … }" snippet into the .click() for your Show/Hide button, replacing the body with:

const input = document.getElementById('password_input');
input.type = input.type === 'password' ? 'text' : 'password';

and your toggle will finally behave.

What that yellow warning actually means

Empty string passed to getElementById() is just a warning coming from Gradio’s own front-end code (specifically NewPasswordModel.sys.mjs).
Internally it calls something like

document.getElementById(someId || "");

When someId is missing, the browser logs that message.
It does not break your page or your show/hide logic; it’s the browser’s way of saying “you asked me to look up an element with an empty ID, I returned null.”

So:

it isn’t thrown by your JavaScript toggle code
it won’t stop the toggle from working
you can safely ignore it (or filter it out of DevTools)

Final, minimal show/hide implementation (works even with `container=False`)

import gradio as gr

with gr.Blocks() as demo:
    pwd_input = gr.Textbox(
        label="Password",
        type="password",
        elem_id="password_input",   # puts the ID directly on the <input>
        container=False
    )
    toggle = gr.Button("Show/Hide", elem_id="toggle-btn")

    # pure-client JS toggle
    toggle.click(
        fn=None,
        inputs=None,
        outputs=None,
        js="""
() => {
  const inp = document.getElementById('password_input');
  if (!inp) { console.error('input not found'); return; }
  inp.type = (inp.type === 'password') ? 'text' : 'password';
}
"""
    )

demo.launch()

Click the button → password dots flip to plain text, and back again.
You’ll still see the yellow warning when the field gains focus, but that’s harmless and expected in current Gradio builds. If everything else works, you’re done!

The JS really is running — it’s just flipping the wrong element.
elem_id="password_input" is put on Gradio’s wrapper <div>, not on the <input> itself, so you’re toggling a type attribute on a <div> that the browser happily ignores.

Replace the body of your JS with one line that drills down to the real <input> and everything works:

show_hide_password_btn.click(
    fn=None,
    inputs=None,
    outputs=None,
    js="""
() => {
  // grab the wrapper <div id="password_input">
  const wrapper = document.getElementById('password_input');
  if (!wrapper) { console.error('wrapper not found'); return; }

  // find the actual <input> inside it
  const inp = wrapper.querySelector('input');
  if (!inp) { console.error('input not found'); return; }

  // flip its type
  inp.type = (inp.type === 'password') ? 'text' : 'password';
}
"""
)

Click Show/Hide now and the password dots switch to plain text (and back) instantly — the yellow “Empty string passed to getElementById()” warning is just Gradio’s own code and can be ignored.