Is it practical to change a TextBox's type dynamically?

Anvil Q&A
1

Had a thought for a number-entry field.

While focused, it should be of type Number, so that mobile users see the right kind of keyboard.

At all other times, it should be of type Text, so that the number can be displayed to match the source material, e.g., “$107,850.45” or “15.75%” or “2.99e10 cm/sec”. This can’t be done while it’s of type Number.

2

The type property can be changed (as can the text), but I can’t guarantee what the browser will do…

A pattern I’ve seen on some other websites is a Link (possibly with a pencil icon or other click-to-edit indicator), which gets hidden and replaced with a TextBox when it’s clicked. You might like to try that too (possibly make a custom component?)

3

Yeah, I thought that changing the type on-the-fly might give browsers conniptions.

Click-to-edit is an extra step I’d like to avoid inflicting on our users. They have many distinct data items to enter. It would make sense, though, for a large amount of data in a single field (e.g., a document).

I have tried a custom component (FlowPanel) with two mutually-exclusive subpanels. Only one at a time is visible. But both are always auto-positioned as if both were always visible.

An XYPanel may have been a better choice. Z-order would be irrelevant since only one subpanel would ever be visible at a time.

4

Hi @p.colbert - regarding your FlowPanel problem, can you describe it in more detail or perhaps share a clone link? I’ve tried the naive case of a Custom Component containing a FlowPanel containing two Labels, the leftmost of which is hidden. The visible one floats to the left as you’d expect:

Design View

29

Running app

55

Clone link for that app:

https://anvil.works/build#clone:HOR45TP5WIKYSAVR=5Y7BBPN6HULFYW5BVDBMRGU5

5

Thanks, Shaun.

I’ve updated the clone to change the visibility at run-time based on an embedded check-box, using data binding to connect the box to the visibility properties of the two Labels. This is almost the situation in my own component. So far, the labels (but not their spacing!) are disappearing and reappearing on command.

Next, I’m going to use FlowPanels instead of Labels.

6

Here’s an app that illustrates the behavior I’m seeing. It uses FlowPanels in place of Labels.

https://anvil.works/build#clone:QGDKQPKQ4F24G4JP=F2V73R2RFXQDZ5MY7THHGEKB

I’d include screen shots like yours, but it’s not clear how to do that. (I’m using Windows 10.)

7

Thanks very much - that’s a bug and I’ve raised an issue in our tracker.

1 Like