Add an 'X' to clear TextInput when User has entered Text

Question

I have a UX class called InputWithLabel that includes both a label and a TextInput.

I am trying to add an 'X' to it that can be used to clear the input text. My plan is to later add the functionality to only display this 'X' when there is actual text in the input field.

For now though, I can't figure out how to do this while not allowing the input to go over top of the 'X'. If you think it's a bug, I'll clean it up and report it as such but I suspect it's just something simple I don't understand so I thought I'd just ask you about it... I tried a number of ideas but none of them seemed to work for me...

<StackPanel ux:Class="InputWithLabel" Width="50%">
    <string ux:Property="Label" />
    <string ux:Property="Value"/>
    <string ux:Property="IsPassword"/>
    <Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>

    <Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf">
        <TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}"/>
        <Panel ux:Name="ClearButton" Alignment="Right">
            <Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf">
                <Rotation Degrees="45"/>
            </Rectangle>
            <Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf">
                <Rotation Degrees="-45"/>
            </Rectangle>
        </Panel>   
    </Rectangle>
</StackPanel>

score 1 · Accepted Answer · answered Dec 12 '17 at 20:26

There is no bug, it's all about understanding how layout works in Fuse. When you put a TextInput along with a Panel in a Rectangle, they both occupy the same space. There is no implicit space consumption happening (by design). The result of that is, as you can see, that things go over one another.

To achieve what you need, it would be a far better strategy to go with a DockPanel, because inside of a DockPanel you can explicitly consume space by docking its children to its sides. Here's an example, based on the code you initially posted:

<StackPanel ux:Class="InputWithLabel" Width="50%" IsPassword="false">
    <string ux:Property="Label" />
    <string ux:Property="Value"/>
    <string ux:Property="IsPassword"/>
    <Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>

    <DockPanel>
        <Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf" Layer="Background" />

        <TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}" Margin="4">
            <WhileContainsText Invert="true">
                <Change clearButton.Visibility="Collapsed" />
            </WhileContainsText>
        </TextInput>

        <Panel ux:Name="clearButton" Dock="Right">
            <Rectangle SnapToPixels="True" Height="1px" Width="10pt" Color="#bdbebf">
                <Rotation Degrees="45"/>
            </Rectangle>
            <Rectangle SnapToPixels="True" Height="1px" Width="10pt" Color="#bdbebf">
                <Rotation Degrees="-45"/>
            </Rectangle>
        </Panel>
    </DockPanel>
</StackPanel>

You'll notice I also included UX code for only showing the close button when there's some text in the input. Cheers!

You're welcome to visit Fuse docs to read more about Layout in general and Responsive layout in particular for useful details on the topic.

Thanks very much. In the process of trying to get this to work, I did wind up trying to use a DockPanel, but I was doing something wrong still and it wasn't working. Also, I found out that I can avoid making the 'X' using rectangles. Instead it turns out I can use a glyph like ❌inside a text tag. — Nested Software, Dec 13 '17 at 18:48

Add an 'X' to clear TextInput when User has entered Text

1 Answers1