Trying to add two fields with the same name generates an error

[quzz99]

What were you trying to do?

Creating a simple PDF. Two fields, both with the same name "customer_name".

This is do-able using acrobat. Create form, add a field, add a second field. Set the field name of each to "customer_name". Save. Both fields show in acrobat. When pdf is opened in a browser, the fields both show and the content is linked. i.e. What I type in the first instance of the field sets the value in the second.

Doing this in pdf-lib generates an error saying field already exists with the specified name:

How did you attempt to do it?

Simply trying to add a second field with the same name triggers the error.

`var form = pdfDoc.getForm();

var tmp = form.createTextField("customer_name");
tmp.addToPage(page, { x: 50, y: 50, width:50,height:50})

var tmp2 = form.createTextField("customer_name");
tmp2.addToPage(page, { x: 50, y: 50, width:50,height:50})
`

Note - if I edit pdf-lib to remove it's check, it does create 2 fields which nearly work. But if the generated pdf is edited in acrobat the second field does not show correctly - it shows as a rectangle without correct field properties and cannot be filled in via acrobat.

What actually happened?

Javascript error :

field already exists with the specified name:

This is triggered by the FieldAlreadyExistsError thrown by the addFieldToParent function. That is, pdf-lib seems to explicitly not allow two fields with the same name - but acrobat does.

What did you expect to happen?

Two fields to be added with the same name, linked together in the same way as acrobat does it.

How can we reproduce the issue?

<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.js"></script> <script src="https://unpkg.com/downloadjs@1.4.7"></script>

Click the button to create a new PDF document with pdf-lib

Create PDF

(Your browser will download the resulting file)

<script> const { PDFDocument, StandardFonts, rgb } = PDFLib async function createPdf() { // Create a new PDFDocument const pdfDoc = await PDFDocument.create() // Embed the Times Roman font const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman) // Add a blank page to the document const page = pdfDoc.addPage() var form = pdfDoc.getForm(); var tmp = form.createTextField("customer_name"); tmp.addToPage(page, { x: 50, y: 50, width:50,height:50}) var tmp2 = form.createTextField("customer_name"); tmp2.addToPage(page, { x: 50, y: 50, width:50,height:50}) // Serialize the PDFDocument to bytes (a Uint8Array) const pdfBytes = await pdfDoc.save() // Trigger the browser to download the PDF document download(pdfBytes, "pdf-lib_creation_example.pdf", "application/pdf"); } </script> [pdflib generated with error check removed.pdf](https://github.com/user-attachments/files/16263416/pdflib.generated.with.error.check.removed.pdf)

JS FIDDLE
https://jsfiddle.net/6abtz71g/

PDF created by acrobat...
[github_buglog_test_acrobat_created.pdf](https://github.com/user-

pdf created with pdflib error code removed
attachments/files/16263347/github_buglog_test_acrobat_created.pdf)

acrobats via of pdflib created doc

Version

latest from gtihub cdn

What environment are you running pdf-lib in?

Browser

Checklist

• My report includes a Short, Self Contained, Correct (Compilable) Example.
• I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

I think acrobat creates a single field and the second field is a widget child with linked values. acrobat then displays this to look like 2 fields in the form designer when in fact there is only 1.

pdflib should detect the second field has a dupe name, and find it's parent and follow the acrobat process to allow the pdf to be opened in acrobat correctly :-)