TextField in POS UI Extensions does not store data

Technical Q&A

Topic summary

A developer is experiencing an issue where text entered into a TextField component in a Shopify POS UI Extension is immediately deleted and not persisted.

Current Problem:

  • TextField renders correctly but does not retain typed input
  • Text disappears immediately upon entry
  • Value changes are not being stored persistently

Code Context:

  • Using TextField component with properties: label, required, disabled, value, and onChange handler
  • Attempting to manage state with a company constant and handler functions
  • Official Shopify documentation lacks working code examples for this use case

Request:
Seeking a minimum viable code example demonstrating proper TextField implementation in a POS modal that successfully stores and maintains user input.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I’m looking for a minimum viable code example using a TextField UI Extension in a POS modal. Right now whatever text I type into the field gets immediately removed. The documentation is here but does not include an example.

Here’s what I have so far, it renders the text box as expected but typing into it is fruitless, it does not change the value persistently.

const company = {val: ''};
function handleCompany(val) {
  company.val = val
}
function getCompany() {
  return company.val
}
companyText = root.createComponent(TextField, {label: 'Company', required: true, disabled: false, value: getCompany(), onChange: val => {handleCompany(val)}})
screen.appendChild(companyText)