Upgraded to 1.8, two remaining issues

Phoenix Forum Questions / Help
,
1

So I took the plunge and update one my smallest Phoenix app from 1.7 to 1.8. Took a bit of work (about a day) but I got it up and running. However two issues remain.

  1. Every time a LiveView session mounts the whole screen goes gray. I have to click on it and then it goes away. Seems to work fine, until of course I switch the live action and it mounts again.

  2. The main reason I jumped to 1.8 so early is to make use of Daisy UI. I have a select drop-down I want to make look like a button. So I thought I could add class="btn" (more or less) and I would be good to go. Bu it doesn’t work. All my buttons have become peach color and orange text with the upgrade to 1.8, but my select remains black (maybe b/c the background it sits on is basically black), but I just want it to mach the regular buttons.

Anyone have any ideas?

[Follow Up] I traced the gray screen back to a modal which is, of course, supposed to be hidden (until an event shows it) but the modal’s background and just the background* is coming up regardless. Here the code that was generated:

<div id="help_modal" class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true" phx-remove="[[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal-content&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;scale-100&quot;],[&quot;opacity-0&quot;,&quot;scale-95&quot;]]}],[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}]]">
  <div id="help_modal-bg" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" phx-click="[[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal-content&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;scale-100&quot;],[&quot;opacity-0&quot;,&quot;scale-95&quot;]]}],[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}]]"></div>

  <div class="fixed inset-0 z-50 overflow-y-auto">
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
      <div id="help_modal-content" class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all
               sm:my-8 sm:w-full sm:max-w-lg sm:p-6
               opacity-0 scale-95" phx-click-away="[[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal-content&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;scale-100&quot;],[&quot;opacity-0&quot;,&quot;scale-95&quot;]]}],[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}]]" phx-window-keydown="[[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal-content&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;scale-100&quot;],[&quot;opacity-0&quot;,&quot;scale-95&quot;]]}],[&quot;hide&quot;,{&quot;to&quot;:&quot;#help_modal&quot;,&quot;transition&quot;:[[&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}]]" phx-key="escape">

That reminds me, modals were something I had trouble with in making the conversion. I remember the compiler saying <.modal> was not defined. Don’t recall how I resolved that though. I’m sure that is key to the problem. Have to dig deeper…

2

So this is what I figured out.

Phoenix 1.8 removed the functional modal component. So I had to re-implement it myself. Unfortunately, just copying the old component from 1.7 back into 1.8 did not work. I am not exactly sure why (something about phx-mounted changing), and I ended up having to implement the basic functionality myself. Sadly it was way more trouble than it should have been. Due to some complications in my prior code (closing the modal on a submit), the most expedient fix was passing a @show_modal assign through Livewire. Definite overkill, but it is at least working.

I still haven’t figured out where Phoenix is dressing up the core components CSS so they are peach and orange and have fancy transition effects. I don’t see it in the core components code. I don’t see it in the app.css — there are these lines which I don’t have any idea what they do.

/* Add variants based on LiveView classes */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

But maybe that has something to do with it.

3

The compiler complained that <.modal> was not defined because it doesn’t exist in the v1.8 version of the core_components.ex file anymore. I highly recommend this page:

If you go through file by file you should be able to spot the difference that might cause your “grey” screen issue.

1 Like