Component renders differently if in a separate component vs inlined

[Neighborkid01]

This might be user error, but I'm not sure what I could be doing wrong.
I have a custom dropdown that I made (styled with tailwind if that matters) and it gets rendered differently if it's in a separate component vs the exact same code inlined in the original file.
My component has a button to add new rows for filters and when my dropdown options are created inline, all dropdown menus are rendered correctly, but when I split that into a different component, the first dropdown renders as expected, but any subsequent dropdowns do not.

Inline dropdown code:

      <button
        class="flex-shrink-0 inline-flex items-center justify-between w-40 py-2.5 px-4 text-sm font-medium text-center bg-slate-700 border border-e-0 border-slate-600 text-slate-100 rounded-s-lg hover:bg-slate-600 focus:outline-none focus:ring-slate-300" type="button"
        on:click=move |_| set_dropdown_hidden.update(|shown| *shown = !*shown)
      >
        { move || selected_field().to_string() }
        <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d=move || if dropdown_hidden() { "m1,1 4,4 4,-4" } else { "m1,4 4,-4 4,4" }
          />
        </svg>
      </button>
      <div
        class="z-10 absolute divide-y divide-slate-100 rounded-lg border border-slate-600 shadow bg-slate-700 mt-11"
        class:hidden=dropdown_hidden
      >
        <ul class="py-2 text-sm text-slate-100" aria-labelledby="dropdown-options">
          { field_options }
        </ul>
      </div>

Inline output:

Screen.Recording.2024-02-16.at.13.24.31.mov

Separate dropdown code:
Base component:

      <button
        class="flex-shrink-0 inline-flex items-center justify-between w-40 py-2.5 px-4 text-sm font-medium text-center bg-slate-700 border border-e-0 border-slate-600 text-slate-100 rounded-s-lg hover:bg-slate-600 focus:outline-none focus:ring-slate-300" type="button"
        on:click=move |_| set_dropdown_hidden.update(|shown| *shown = !*shown)
      >
        { move || selected_field().to_string() }
        <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d=move || if dropdown_hidden() { "m1,1 4,4 4,-4" } else { "m1,4 4,-4 4,4" }
          />
        </svg>
      </button>
      <Dropdown hidden=dropdown_hidden options=field_options />

Dropdown component:

use leptos::*;

/// Renders a generic form error
#[component]
pub fn Dropdown(
  /// Whether or not the dropdown options are hidden
  hidden: ReadSignal<bool>,
  /// The options for the dropdown
  options: View,
  /// The left offset of the dropdown options
  #[prop(default = "")]
  offset: &'static str,
  /// The margin top of the dropdown options
  #[prop(default = "mt-11")]
  margin_top: &'static str,
) -> impl IntoView {
  view! {
    <div
      class="z-10 absolute divide-y divide-slate-100 rounded-lg border border-slate-600 shadow bg-slate-700"
      class=format!("{}", offset)
      class=format!("{}", margin_top)
      class:hidden=hidden
    >
      <ul class="py-2 text-sm text-slate-100" aria-labelledby="dropdown-options">
        { options }
      </ul>
    </div>
  }
}

Separate dropdown output:

Screen.Recording.2024-02-16.at.13.25.17.mov

[basro]

In your Dropdown component you are setting the class attribute thrice. Setting the class more than once will not combine the classes, it will completely replace the previous value each time.

Edit:
Just to be clear, setting a specific class with this syntax: class:hidden=hidden does preserve the previously set classes. Only class="" will reset the classes.

[Neighborkid01]

Thanks. That fixed it.
I replaced my multiple class="..." with one class=format!("...", ...) and that did the trick.