FloatLabel: inside Accordion misbehaves when dynamically adding/removing items

[prosanabani]

Describe the bug

Bug: FloatLabel inside Accordion misbehaves when dynamically adding/removing items

Description

When using the FloatLabel component inside an Accordion with dynamically added/removed items (using useFieldArray from react-hook-form), the FloatLabel does not behave correctly. Specifically:

1. When a new item is added, the FloatLabel for the previous items immediately don't "float" while the input have value.
2. The issue occurs without-with needing to collapse/expand the Accordion tabs.

Expected Behavior

• The FloatLabel should only "float" when the corresponding input field is focused or contains content.
• Adding or removing items dynamically should not affect the FloatLabel state of other items.

Actual Behavior

• The FloatLabel for previous items immediately don't "float" when a new item is added, while the input have value.
• The issue occurs immediately after adding a new item, without requiring any interaction with the Accordion.

---

Steps to Reproduce

1. Use the Accordion component with dynamically added/removed items.
2. Place a FloatLabel and InputText inside each AccordionTab.
3. Add a new item dynamically (e.g., using a button to append to the fields array).
4. Observe that the FloatLabel for previous items misbehaves.

---

Minimal Reproducible Example

Here’s a minimal example to reproduce the issue:

import React, { useEffect } from 'react';
import { useFormContext, useFieldArray } from 'react-hook-form';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { FloatLabel } from 'primereact/floatlabel';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';

const DynamicAccordionForm = () => {
  const { control, register, reset } = useFormContext();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'questions',
  });

  useEffect(() => {
    reset({ questions: [{ question: '' }] });
  }, [reset]);

  return (
    <div>
      <Accordion>
        {fields.map((field, index) => (
          <AccordionTab
            header={`Question ${index + 1}`}
            key={field.id}
          >
            <FloatLabel>
              <InputText
                id={`question-${index}`}
                {...register(`questions.${index}.question`)}
              />
              <label htmlFor={`question-${index}`}>Question</label>
            </FloatLabel>
            <Button
              icon="pi pi-trash"
              onClick={() => remove(index)}
              severity="danger"
            />
          </AccordionTab>
        ))}
      </Accordion>
      <Button
        icon="pi pi-plus"
        label="Add Question"
        onClick={() => append({ question: '' })}
      />
    </div>
  );
};

export default DynamicAccordionForm;

Environment

• PrimeReact Version: [10.9.2]
• React Version: [19.0.0]
• Browser: [Chrome 133.0.6943.142]
• Operating System: [Windows 11]

---

Additional Information

• The issue does not occur if the FloatLabel is used outside the Accordion.
• The issue is reproducible even with a minimal setup, as shown in the example above.
• Forcing a re-render of the Accordion or AccordionTab using key props does not resolve the issue.

---

Suggested Fix

The issue might be related to how the Accordion component manages its internal state when dynamic content is added. A potential fix could involve:

1. Ensuring that the FloatLabel component properly re-initializes when its parent AccordionTab is re-rendered.
2. Providing a way to force the FloatLabel to re-evaluate its state when dynamic content is added.

Reproducer

https://stackblitz.com/edit/vitejs-vite-mzkmrc8x

System Information

System:
    OS: Windows 11 10.0.22631
    CPU: (4) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 3.18 GB / 15.81 GB
  Binaries:
    Node: 20.11.1 - C:\nvm4w\nodejs\node.EXE
    npm: 10.2.4 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 10.2.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (132.0.2957.140)
    Internet Explorer: 11.0.22621.3527

Steps to reproduce the behavior

Steps to Reproduce the Behavior

1. Set up a form with dynamic fields:

   • Use react-hook-form with useFieldArray to manage an array of questions.
   • Place each question inside an AccordionTab component from PrimeReact.

2. Add FloatLabel and InputText to each AccordionTab:

   • Inside each AccordionTab, include a FloatLabel wrapping an InputText component.

3. Add a button to append new questions dynamically:

   • Add a button that appends a new question to the fields array using the append method from useFieldArray.

4. Observe the behavior:

   • Click the button to add a new question.
   • Notice that the FloatLabel for previous accordion's questions don't "float" while their input fields have values.

Expected behavior

• Expected: The FloatLabel should only "float" when the corresponding input field is focused or contains content.
• Actual: The FloatLabel for previous questions don't "float" without any interaction with the input fields.