Search field within radix-select

[sheikhaaliya]

Bug Report: Issue with TextField Width in StyledSelect Component

Summary:
In the StyledSelect component, the TextField element inside the Select.Content dropdown does not take the full width as expected, causing layout issues and breaking the responsive design.

---

Steps to Reproduce:

1. Implement the StyledSelect component with a TextField for search functionality.
2. Add a list of items to the Select dropdown.
3. Set the width of the Select to 100% for both the Select.Trigger and Select.Content elements.
4. Ensure the TextField is placed inside the Select.Content and is set to take full width (width: '100%').
5. Open the dropdown and observe the TextField inside it.

---

Expected Behavior:
The TextField element inside the Select.Content should take up the full width of the dropdown, aligning properly with the dropdown's container. It should be fully responsive.

---

Actual Behavior:
The TextField inside the Select.Content does not take up the full width as expected. Instead, it appears narrower than the parent Select.Content, resulting in layout issues and misalignment with other elements inside the dropdown.

---

Environment:

• Browser: All browsers (e.g., Chrome, Firefox, Safari)
• Device: Desktop
• Framework: React, Radix UI, TypeScript
• Library Version: Radix UI v1.0.x, React 18.x

---

Possible Cause:
The issue may be caused by the Box wrapper around the TextField not properly inheriting the full width, or conflicting styles preventing the TextField.Root from taking up the intended width. Additionally, inline styles or improper width declarations could be interfering with the layout.

---

Suggested Fix:

1. Ensure that the TextField.Root element has a width: 100% style applied directly to it.
2. Consider removing any unnecessary wrappers (e.g., the Box around TextField) to avoid conflicting styles.
3. Verify that all parent components of the TextField (e.g., Select.Content, Select.Trigger) are also styled with width: 100%.

---

Additional Notes:

• This issue only affects the layout when the add prop is set to true and the search functionality is enabled within the Select dropdown.
• The problem can be visually observed in a responsive layout where the dropdown width should adjust with the screen size.

---

Priority: Medium