POSSIBLE BUG
By default, I would expect the TextField component to have a default value of “text” for its cursor property. However, it defaults to the normal cursor, and it is also unable to be overridden or changed, even if I do explicitly give it a style of “cursor: text”. I also tried “cursor: text !important”, which also didn’t work. When inspecting the TextField component in the browser, I see that its cursor property is always set to “default”. So I suspect that the TextField’s cursor property is hard set to “default” no matter what. Is there a workaround to this?
Unfortunately, the cursor property can be a little misleading in how it should be applied, because you only really want that to be applied when hovering over the component.
What I recommend is to create a new style class named TextCursorOnHover, click the + icon to add a new configuration for “Element State”, and then specify the Element State to be “hover”. Under the “Miscellaneous” category, locate “cursor” and select “text”, then click “OK”. Save your project.
Now locate your Text Field and instead of directly modifying the style.cursor property, instead set style.classes to have/include the “TextCursorOnHover” Style Class.
OR…
There is an issue here where the cursor property is indeed overriding any applied style props or classes. I’ll open an internal ticket to address the issue. There is already an issue. I’ve linked this forum post to that issue.