Tabbed Surface + Tailwind Modal, TextInput resets on `display: none;`?

Put together a tabbed surface modal and using “display: none;”.

When I type in a TextInput field and click the Surface button component “tab” and come back, the value changes back to the original model value and wipes-out the text I entered(video example attached to gist).

Is there an alternate “hiding” method in html that won’t change the contents? Or might this be something else that is interacting with the TextInput value when I click that button?

dependencies:

elixir 1.12.2-otp-24
erlang 24.0.3
nodejs 15.14.0
  phoenix 1.6.2
  phoenix_ecto 4.4.0
  phoenix_html 3.1.0
  phoenix_live_dashboard 0.5.3
  phoenix_live_reload 1.3.3
  phoenix_live_session 0.1.3
  phoenix_live_view 0.16.4
  phoenix_pubsub 2.0.0
  phoenix_view 1.0.0
  surface 0.6.1
  surface_formatter 0.6.0
  surface_heroicons 0.5.3

regards, Michael

I may be off base, but I think making the tabs buttons is the issue. When you click a button that sends an event to the server that you have to handle and then reload the changes. Since you do not update the application state on text entry before submitting, when the modal reloads it loses the input. You can make tabbed interfaces with just HTML + CSS using the radio button hack. I don’t have access to the source right now, but that’s how I put together this a few years ago: http://aedntrxnsv3.herokuapp.com

Good example of the radiobutton/checkbox hack for tabbed UI:

Thanks for your feedback on this, I believe you’re correct with respect to the cause. I decided to just remove the “tabs” and have a scrollable modal.

I’ve not used Surface, but if you still want the tabbed interface, have you looked at the built-in tabs: Surface


<Tabs id="tabs-example" boxed>

  <TabItem label="Pictures" icon="fas fa-image">
    Lorem ipsum dolor sit amet,
    <strong>consectetur</strong> adipiscing elit.
    Fusce id fermentum quam.
    <hr>
    <div class="buttons is-right">
      <Button color="success">Yes</Button>
      <Button color="danger">No</Button>
    </div>
  </TabItem>

  <TabItem label="Music" icon="fas fa-music">
    Fusce id fermentum quam. Proin sagittis,
    nibh id hendrerit imperdiet, elit
    <strong>sapien</strong> laoreet elit.
    <hr>
    <div class="buttons is-right">
      <Button color="info">Ok</Button>
      <Button color="warning">Maybe</Button>
    </div>
  </TabItem>

  <TabItem label="Videos" icon="fas fa-film">
    Lorem ipsum dolor sit amet.
  </TabItem>

</Tabs>

1 Like

Oh that’s crazy I didn’t see that. Thanks for the heads-up. Will circle-back on this when I got some cycles.

I think I’ll hold-off on the Tabs. It has a bulma dependency and since there is so much UI change going on WRT LiveView and Surface I’m going to wait and see if a solution presents itself in the short term.