[Feature request] TextInput/Text switch

[michaelw88]

Hi,

I am thinking about implementing a new component that basically wraps the Text and TextInput (and Textarea) component and allow seamless switchting between the two. E.g., consider a Dashboard where a user can provide commentar or adjust some chart titles, I would display normal text by default, but could switch to an inline text edit by switching out the Text to the TextInput component.

Code would nearly ready, see here for a very simple sample app: https://py.cafe/michaelw88/dash-app-editable-text-toggle (Button switches between mode. Doubleclick on Text also switches to TextInput).

This behaviour can be achieved also with normal dash callbacks or even CSS styling. However, such a switch component would simplify this significantly. Hence before doing a PR, I would be interested to get some feedback whether we should add such a component directly to dmc or not.

This would also go in hand nicely with the new PR on debounce (e.g., hit enter switches back to Text).

[AnnMarieW]

This is an awesome component! I'm moving this over to Discussions and we can continue the conversation there...

[AnnMarieW]

Hi @michaelw88

Thanks for the suggestion—this is a fantastic idea, and I’d love to see it in DMC too. However, it’s currently not on our roadmap to add components that aren’t part of the upstream Mantine library.

Here are a couple of ways we could still make this happen:

1. Submit a Feature Request to Mantine - and if this feature gets added there we can incorporate it into DMC.
2. You could publish this as a separate component and share it with the Dash community. We could promote it on the Dash Community Forum and in the DMC Discord Spotlight section. I’m also planning to add a new section in the DMC docs for showcasing community-created snippets, components, and resources—yours would be a great fit.

Feel free to share a link to what you have so far - I'm very interested to see how you created this component.

[michaelw88]

Hi @AnnMarieW ,

here is the link: https://github.com/michaelw88/dash-mantine-components/blob/dc5883bf6892fbdb768205293c15790798a18c34/src/ts/components/core/input/EditableText.tsx

Good I asked before making the PR. I will try my luck with Mantine or publish as DMC community component. As Codebase is there, maybe they will take it on.

[BSd3v]

Hello @michaelw88,

I believe that this falls more in the realm of an AIO component. As the comment is always dependent upon the value and id, swapping out the actual component that is working would only need to be an adjustment to the children of the containing object. Here is an example of this working (https://py.cafe/BSd3v./dash-app-editable-text-toggle):

from dash import callback, Input, Output, callback, MATCH, ctx, Patch, Dash, _dash_renderer, no_update, State, html, MATCH
import dash_mantine_components as dmc
import uuid

_dash_renderer._set_react_version("18.2.0")


class EditableText(html.Div):
    class ids:
        ## Designer
        component_id = lambda aio_id: {"index": aio_id, "type": "editable-text-holder"}
        text_id = lambda aio_id: {"index": aio_id, "type": "editable-text"}
        toggle_id = lambda aio_id: {"index": aio_id, "type": "editable-text-toggle"}

    def __init__(self, aio_id=None, value=None):
        self.aio_id = aio_id or str(uuid.uuid4())
        super().__init__([
            dmc.TextInput(id=self.ids.text_id(self.aio_id), value=value),
            dmc.Button("Toggle mode", id=self.ids.toggle_id(self.aio_id), n_clicks=0),
        ], id=self.ids.component_id(self.aio_id))

    @callback(
        Output(ids.component_id(MATCH), 'children'),
        Input(ids.toggle_id(MATCH), 'n_clicks'),
        State(ids.text_id(MATCH), 'value'),
        prevent_initial_call=True
    )
    def swap(n, v):
        if n:
            child = Patch()
            text_id = EditableText.ids.text_id(ctx.triggered_id.index)
            if n % 2 == 0:
                child[0] = dmc.TextInput(id=text_id, value=v)
            else:
                child[0] =  dmc.Textarea(id=text_id, value=v)
            return child
        return no_update


app = Dash(__name__, external_stylesheets=dmc.styles.ALL)
app.layout = dmc.MantineProvider(
    children=[
        EditableText(value="test", aio_id="new"),
        html.Div(id='output')
    ],
)

@app.callback(
    Output('output', 'children'),
    Input(EditableText.ids.text_id('new'), 'value')
)
def display_out(v):
    return v

app.run(debug=True)