BUG? Uncaught TypeError: When adding the password functionality

Hi Sean and team

After adding Password visibility per: https://preview.keenthemes.com/html/metronic/docs/forms/password-meter

(i've copy paste to ensure it's per the examples)

I'm getting errors that trace back to this part of the code:

scripts.bundle.js:2805 Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')
at _highlight (scripts.bundle.js:2805:56)
at _check (scripts.bundle.js:2757:9)

which is:

var _highlight = function() {
var items = [].slice.call(the.highlightElement.querySelectorAll('div'));
var total = items.length;

I'm thinking this is a bug, because I've not chosen the 'highlight' option for the password functionality. I'm using 'visibility' instead.

per your documentation:

The Visibility Toggle is an icon button positioned within the input field to toggle password state from hidden to visible and vice versa. The Visibility Toggle can be identified by adding data-kt-password-meter-control="visibility"

I'm thinking that the script is looking for an element / div with =highlight.

Can you advise if this is my mistake, or a bug?

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

Hi,

Thanks for the feedback. We are looking into this and will get back to you shortly.

Regards.

Hi,

We confirm this bug and we will release a fix in the next update. In the meantime you can apply a quick fix by changing _handlers function in src/js/components/password-meter.js:

// Handlers
var _handlers = function() {
if (the.highlightElement) {
the.inputElement.addEventListener('input', function() {
_check();
});
}

if (the.visibilityElement) {
the.visibilityElement.addEventListener('click', function() {
_visibility();
});
}
}

Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

Regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(