We can use spellcheck="false" on the input element when it is displaying content.

Source

I use it on symfony app

 ->add('password',PasswordType::class,[
                'help_html'=>true,
                'row_attr'=>[
                    'data-controller'=>"password-visibility",
                ],
                'attr'=>[
                    'data-password-visibility-target'=>"input"
                ],
                'help'=>'<button type="button" data-action="password-visibility#toggle">
    <span data-password-visibility-target="icon">Eye</span>
    <span data-password-visibility-target="icon" class="hidden">Eye Slash</span>
  </button>'
            ])

work but look like that

Hi,

Why event.preventDefault here:

Thanks :)

I installed this via command npm install stimulus-password-visibility -D, and the rest of the installation following the steps on https://stimulus-components.netlify.app/docs/stimulus-password-visibility/. I get this typesctipt compilation error in webpack:

      TS2345: Argument of type 'typeof t' is not assignable to parameter of type 'Constructor<Controller>'.
  Types of construct signatures are incompatible.
    Type 'new (context: Context) => t' is not assignable to type 'new (...args: any[]) => Controller'.
      Property 'dispatch' is missing in type 't' but required in type 'Controller'.

for line application.register("password-visibility", PasswordVisibility);

Not sure if this is caused by me using Stimulus 3.0 instead of Stimulus 2.0...

The hidden attribute is compatible with all modern browsers https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden and at the same time it's an a11y improvement.

Also most frameworks keep in mind this attribute like Bootstrap or Tailwindcss.

Hi,

Seeing the error message with webpacker below when using the latest version 2.1.1

ERROR in ./node_modules/stimulus-password-visibility/dist/stimulus-password-visibility.mjs 37:2-3
Can't import the named export 'Controller' from non EcmaScript module (only default export is available)

Our webpacker.yml config:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that versions and hashed value of the package contents in the project's package.json
  check_yarn_integrity: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      "Access-Control-Allow-Origin": "*"
    watch_options:
      ignored: "**/node_modules/**"

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

Any ideas ?

I've been working on a side project and I've used stimulus-dropdown without issue. It works great! So I figured I'd add stimulus-password-visibility. However, when I use it, I get the following message:

Failed to resolve entry for package "stimulus-password-visibility". The package may have incorrect main/module/exports specified in its package.json.

I imported it in exactly the same way as stimulus-dropdown but I'm getting this message, making it unusable.

FWIW, I'm on Rails 7 (latest) and I'm using vite_rails instead of all the other asset builder pipelines. That shouldn't really matter though.

At a cursory glance (I haven't looked at the code), I noticed the module line in the package.json looks like:

"module": "dist/stimulus-password-visibility.es.js"

Whereas in stimulus-dropdown:

"module": "dist/stimulus-dropdown.mjs"

Perhaps there's a conflict with that file extension?

Here's the error message that pops up:

Thanks!

Hello,

I see that there is a dependency to date-fns package.

I was wondering, is it really needed?

The stimulus component affirms that the controller should read as follows

import { Application } from '@hotwired/stimulus'
import PasswordVisibility from 'stimulus-password-visibility'

const application = Application.start()
application.register('password-visibility', PasswordVisibility)

when most controllers are initialized as import { Controller } from "@hotwired/stimulus"

The naming of the controller is apparently agnostic to its contents, as the documentation suggests index.js. The following case uses passwordview_controller.js

Whatever the attempts, in the following three variants, the following errors are encountered in the browser console:
import { Application } / Application.start()

import { Controller } / Application.start()

import { Controller } / Controller.start()

config/importmap.rb includes pin "stimulus-password-visibility", to: "https://ga.jspm.io/npm:[email protected]/dist/stimulus-password-visibility.es.js"

view set to

<div data-controller="password-visibility">
    <input type="password" data-password-visibility-target="input" spellcheck="false" style='appearance: none; display: block; margin: 0; padding: 8px 12px 8px 48px; tab-size: 4;' />
    <button type="button" data-action="password-visibility#toggle" style='cursor: pointer; display: flex; margin: 0; padding: 0 12px 0 0; position: absolute; right: 0px; text-transform: none; top: 0px;' >
      <span data-password-visibility-target="icon"><%= fa_icon('eye', class: 'fa-1g') %></span>
      <span data-password-visibility-target="icon" class="hidden"><%= fa_icon('eye-slash', class: 'fa-1g') %></span>
    </button>
</div>

do note that there is a css issue, where buttons appear below the input field, which was subject to a failed attempted to be fixed here, in an initial case, before defining a specific class for this use-case, via style definitions (tailwind is uber-view-polluting IMHO) - may require a different issue

GIven the rails out-of-the-box contents of javascript/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

how should this component be effectively written?

This is pertinent to all these components as they follow an identical pattern...