Password component issue

UI Components for React
Post Reply
kevinquinn1918
Posts: 14
Joined: 26 Aug 2020, 14:14

13 May 2022, 22:57

I didn't see a search button so I don't know if this has been mentioned or not.

When I use the Password component, the id does not get passed correctly. The input is wrapped inside a div and the id gets put on the div container and not the input. I'm using primereact 8.0.1

Code: Select all

<Password
        id={id}
        value={value}
        feedback={false}
        onChange={(e) => handler(e.target)}
        className={
          isError ? "p-invalid inputfield w-full" : "inputfield w-full"
        }
      />
The code below is rendered html when

Code: Select all

<div id="password" class="p-password p-component p-inputwrapper p-inputwrapper-filled p-invalid inputfield w-full">
<input type="password" class="p-inputtext p-component p-filled p-password-input" value=""  />
</div>

Melloware
Posts: 3137
Joined: 22 Apr 2013, 15:48

14 May 2022, 15:13

You want the property `inputId` which is "Identifier of the input element." the id is the ID of the whole DIV container

Code: Select all

inputId={id}
See docs: https://primefaces.org/primereact/password/
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

kevinquinn1918
Posts: 14
Joined: 26 Aug 2020, 14:14

18 May 2022, 14:46

OK Thanks. I just checked and I never realized that all the input types had an inputId parameter. I'm going to start using that. I usually don't read the documents, I just look at the examples and the code under the hooks tab.

kevinquinn1918
Posts: 14
Joined: 26 Aug 2020, 14:14

18 May 2022, 15:00

Good thing you responded. For the inputNumber example, I looked at the first one and it was integerOnly. I didn't read the documents but the hooks example said inputId="integeronly". Stupid me, thought that was the way to declare it as an integer. I didn't realize, integer was the default and the inputId was used to identify it. I completely makes sense.

Melloware
Posts: 3137
Joined: 22 Apr 2013, 15:48

18 May 2022, 15:06

Nice!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests