InputNumber runtime style tag created but empty when component first mounts inside a re-rendering subtree (styled mode, Aura)

[GiorgiLeki]

Describe the bug

In styled mode with the Aura preset, InputNumber's runtime CSS can fail to populate its own <style data-primevue-style-id="inputnumber-style"> tag. The tag is created (so the loader's "already loaded" guard
short-circuits subsequent attempts) but contains no CSS. All .p-inputnumber-* rules are therefore missing from the
document, leaving the component with correct DOM/classes but no chrome — e.g. stacked/horizontal spinner buttons
render as bare +/− icons with no borders or background.

The decisive DevTools check once the broken page is open:

document
.querySelector('style[data-primevue-style-id="inputnumber-style"]')
?.textContent.includes('.p-inputnumber')

Returns true on pages where InputNumber is a stable Form-registered field, false on pages where InputNumber first
mounts inside a subtree whose existence is driven by render-time reactive state mutation.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-issue-template

Environment

• PrimeVue 4.5.5 (also reproducible on older 4.5.x)
• @primeuix/themes/aura, no cssLayer, no unstyled
• Vue 3.5.x
• @primevue/forms for Form/Zod integration
• Tailwind 3 with @tailwind base (not load-bearing — same bug without Tailwind)

Vue version

3.5.x

PrimeVue version

4.5.5

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

Environment:

• PrimeVue 4.5.5 (also reproducible on older 4.5.x)
• @primeuix/themes/aura, no cssLayer, no unstyled
• Vue 3.5.x
• @primevue/forms for Form/Zod integration
• Tailwind 3 with @tailwind base (not load-bearing — same bug without Tailwind)

Minimal shape of the component that triggers it:

  <div v-for="key in activeKeys" :key="key">
    <InputNumber
      :id="`v_${key}`"
      v-model="values[key]"
      showButtons
      buttonLayout="horizontal"
    />
  </div>
</Form>

<script setup> const formValues = ref({ type: '' }) const values = ref({}) const activeKeys = computed(() => keysForType(formValues.value.type)) // Called during render — mutates refs that `activeKeys` depends on. function syncOnRender($form) { formValues.value.type = $form?.type?.value ?? '' return false } </script>

On the dialog's first render, activeKeys changes as syncOnRender runs during the render pass, so the v-for children
mount/unmount during the same render cycle. InputNumber's style-loader first call lands in that churn and the <style>
tag's content write is lost, while the loader still sets its "loaded" flag.

Expected behavior

The style tag should either contain the full .p-inputnumber { ... } CSS after the component first mounts, or the
loader should recover on the next mount if the previous attempt didn't write content.

Actual behavior

• <style data-primevue-style-id="inputnumber-style"> exists in but is empty (textContent === "").
• Every InputNumber on the page renders with no .p-inputnumber-* rules applied.
• Subsequent instances don't trigger a retry — the loader considers this component's styles "already loaded."