I want to create a TextField like the one in the image below, where users can manually type a formula (e.g., Basic Fuel + Basic Kurs, (Basic Fuel + Basic Kurs)/Basic Fuel), and a dropdown appears showing available variables (e.g., Basic Fuel, Basic Kurs, etc.) as the user types. How can I implement this in React?

The dropdown should behave as follows:

1. When a user starts typing, it shows suggestions based on the available variables (like an autocomplete).
2. The user can select a variable from the dropdown to insert it into the formula.
3. The TextField should allow free typing for operators like +, -, *, etc.

I have tried to implement the Select component from ant design with "tags" mode, but I am confused, how can the user write the operators manually.

I want to create a TextField like the one in the image below, where users can manually type a formula (e.g., Basic Fuel + Basic Kurs, (Basic Fuel + Basic Kurs)/Basic Fuel), and a dropdown appears showing available variables (e.g., Basic Fuel, Basic Kurs, etc.) as the user types. How can I implement this in React?

The dropdown should behave as follows:

1. When a user starts typing, it shows suggestions based on the available variables (like an autocomplete).
2. The user can select a variable from the dropdown to insert it into the formula.
3. The TextField should allow free typing for operators like +, -, *, etc.

I have tried to implement the Select component from ant design with "tags" mode, but I am confused, how can the user write the operators manually.

• reactjs
• antd
• textfield

Share Improve this question Follow edited Nov 19, 2024 at 8:18 rzickler 77311 gold badge66 silver badges2121 bronze badges asked Nov 19, 2024 at 6:58 NizarNizar 355 bronze badges 5

• This isn't nearly enough info here. Also it's expected you at least try something yourself and we can help iron out specific issues you're facing. How are they typing the formula? What variables can they use, any? Or from a set list? You say "a TextField like the one in the image", but it seems the image shows a dropdown box. We're going to need more info with an attempt of a basic example and a clear description of specific issues you're facing – Jayce444 Commented Nov 19, 2024 at 7:07
• Hi @Jayce444, Thank you for your feedback! I’ve updated my question with a clearer description, a basic example of what I’ve tried so far, and the specific issues I’m facing. I hope the revised version is now clear and provides enough context to help address the problem. – Nizar Commented Nov 19, 2024 at 7:23
• okay so to be clear, you're talking about typing into a dropdown, which isn't possible. A text field and a dropdown are 2 separate things. Do you mean a text field that when you type into it, suggestions appear below, like a select input? Do you have a real world example of what you're after we can look at? – Jayce444 Commented Nov 19, 2024 at 9:37
• Yes, that's exactly what I meant. I struggled to explain it clearly. I found a real-world example that closely matches my case here: stackoverflow/a/22173698/10501598. Do you have any other suggestions ? – Nizar Commented Nov 19, 2024 at 14:51
• Hi @Jayce444, I’ve found a solution to this issue. If you have suggestions for improvement, I would really appreciate it. Thanks – Nizar Commented Nov 20, 2024 at 7:09

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I’ve found a solution to this issue, but I want to make sure it’s the optimal approach. If anyone has suggestions for improvement, I would really appreciate it.

My solution: https://codesandbox.io/p/sandbox/select-custom-formula-qpp7ds