fix(react-components/text-field): undefined value should not be displayed

[malikarami]

Describe the bug
The textfield is rendering undefined as a value.

To Reproduce

import { TextField } from '@tapsioss/react-components/TextField';

const Test = () => {

  // the initial value of the state is undefined
  const [phoneNumber, setPhoneNumber] = useState<string>();
  
  return (
    <div>
      <TextField
                placeholder="شماره همراه"
                type="tel"
                maxLength={11}
                value={phoneNumber}
                onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
       />
    </div>
  )
}

Expected behavior
undefined should be treated as empty string and the placeholder should be rendered instead of the "undefined" string.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]: MacOS 14
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: ^0.17.1

Additional context Add any other context about the problem here.

[amir78729]

Passing undefined as the value of a controlled input is considered an anti-pattern in both React and standard HTML input behavior. When a controlled input (like ) receives undefined, the browser renders the string "undefined" instead of leaving the field empty or showing the placeholder.

To avoid this, it’s recommended to always pass either a string or an empty string as the value:

<TextField
  placeholder="شماره همراه"
  type="tel"
  maxLength={11}
  value={phoneNumber ?? ''}
  onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
/>

This ensures consistent behavior and aligns with React’s expectations for controlled components. Also you can set "" as an default value for your useState hook:

const [phoneNumber, setPhoneNumber] = useState<string>("");

We don’t plan to coerce undefined to an empty string internally, since doing so would hide a potentially unintended state in the consuming application. Instead, we encourage explicitly handling undefined values to prevent bugs and keep the component behavior predictable.