error not triggering seed did_mount

app.rs

use seed::*;
use seed::{events::Listener, prelude::*};

// ------ ------
//     Model
// ------ ------
#[derive(Clone, Copy)]
pub enum FormType {
    Create,
    Update,
}

#[derive(Default)]
pub struct Model {
    pub detail_pane: Option<Thing>,
    pub edit_detail_pane: Option<Thing>,

    pub status: String,
}

// ------ ------
//     Init
// ------ ------

pub fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
    let mut model = Model::default();
    model
}

// ------ ------
//    Update
// ------ ------

#[allow(dead_code)]
#[derive(Clone)]
pub enum Msg {
    InputKP(web_sys::Event),
    Cancel,
    Edit,
    ShowDetailPane,
}

const ENTER_KEY: u32 = 13;

pub fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
    match msg {
        Msg::Cancel => {
            model.edit_detail_pane = None;
            model.detail_pane = None
        }
        Msg::Edit => {
            model.edit_detail_pane = Some(Thing {
                name: "Foo".to_string(),
                description: "Nar".to_string(),
            })
        }
        Msg::ShowDetailPane => {
            model.detail_pane = Some(Thing {
                name: "Foddo".to_string(),
                description: "Nar".to_string(),
            })
        }
        Msg::InputKP(ev) => {
            let code = seed::to_kbevent(&ev).key_code();
            if code == ENTER_KEY {
                ev.prevent_default();
            }
        }
    }
}

pub struct Thing {
    name: String,
    description: String,
}

pub fn thing_view(entity: &Thing, position: usize) -> Node<Msg> {
    li![
        class![
            "my-1"
            "py-1"
            "px-2"
            "hover:bg-green-200"
            "cursor-pointer"
            "rounded"
        ],
        div![
            class!["flex" "flex-row"],
            div![class!["flex-auto"], entity.name,],
            div![
                class!["flex-none"],
                i![
                    class!["fas fa-eye", "hover::text-green-600"],
                    "X",
                    simple_ev(Ev::Click, Msg::ShowDetailPane)
                ]
            ]
        ]
    ]
}

pub fn masterview(model: &Model) -> Node<Msg> {
    let dummy_keys = vec![1, 2, 3, 4, 5];
    let entity = Thing {
        name: "Foo".to_string(),
        description: "Bar".to_string(),
    };
    let els = dummy_keys
        .iter()
        .enumerate()
        .map(|(position, key)| thing_view(&entity, position))
        .collect::<Vec<Node<Msg>>>();
    div![
        class![
        "px-2"
        "py-2"
        "bg-white"
        "rounded-lg"
        "shadow-xl"
        ],
        h2![
            class![
                "font-bold"
                "text-center"
                "border-dotted"
                "border-b-2"
                "mb-2"
                "pb-"
            ],
            "List of Foos"
        ],
        if let Some(detail) = &model.detail_pane {
            detail_pane(&detail, &model)
        } else {
            empty![]
        },
        div![ul![els]]
    ]
}

// View
pub fn view(model: &Model) -> Node<Msg> {
    div![
        class!["bg-gray-400"],
        div![
            class!["flex", "flex-row"],
            div![class!["px-2", "py-2", "w-1of3"], masterview(&model)],
        ],
        div![class!["flex", "flex-row"],],
    ]
}

fn form(e: &Thing, form_type: FormType) -> Node<Msg> {
    let els = vec![
        input![],
        div![],
        textarea![],
        div![noscript![]],
        div![],
        div![div![], pre!["blah"]],
    ];

    p![
        class!["flex" "flex-col"],
        div![],
        div![class!["flex" "flex-row"], els,],
        p![
            "Should call either did_mount or did_update called whenever this p! is rendered",
            did_mount(|_| {
                log!("Triggered Mounting Ok");
            }),
            did_update(|_| {
                log!("Triggred update okay");
            }),
        ]
    ]
}

pub fn detail_pane(entity: &Thing, model: &Model) -> Node<Msg> {
    if model.edit_detail_pane.is_some() {
        modal_confirm_cancel_dialog(
            entity.name.clone(),
            div![form(&entity, FormType::Update)],
            "Update".to_string(),
            Msg::Cancel,
            "Cancel".to_string(),
            Msg::Cancel,
        )
    } else {
        modal_confirm_cancel_dialog(
            entity.name.clone(),
            div![detail(&entity)],
            "Edit".to_string(),
            Msg::Edit,
            "Close".to_string(),
            Msg::Cancel,
        )
    }
}

pub fn detail(entity: &Thing) -> Node<Msg> {
    p![
        p![
            "blah",
            did_mount(|_| {
                // all_maths_jax();
                log!("inside first toggle str")
            }),
            will_unmount(|_| {
                // all_maths_jax();
                log!("inside first unmount toggle str")
            }),
        ],
        div![
            "blah 2",
            did_mount(|_| {
                // all_maths_jax();
                log!("inside second toggle imp")
            }),
            will_unmount(|_| {
                // all_maths_jax();
                log!("inside second unmount toggle imp")
            }),
        ],
        p![
            did_mount(|_| {
                // all_maths_jax();
                log!("inside outer toggle imp")
            }),
            will_unmount(|_| {
                // all_maths_jax();
                log!("inside outer unmount toggle imp")
            }),
        ],
        will_unmount(|_| {
            // all_maths_jax();
            log!("inside second outer outer toggle imp")
        }),
    ]
}

pub fn modal_confirm_cancel_dialog<S: Into<String>>(
    title: S,
    body: Node<Msg>,
    confirm_text: S,
    confirm_msg: Msg,
    cancel_text: S,
    cancel_msg: Msg,
) -> Node<Msg> {
    let title = title.into();
    let confirm_text = confirm_text.into();
    let cancel_text = cancel_text.into();
    div![
        class![
            "fixed"
            "inset-0"
            "z-50"
            "overflow-auto"
            "bg-smoke-light"
            "flex"
        ],
        div![
            class![
                "relative",
                "p-8",
                "bg-white",
                "w-full",
                "max-w-6xl",
                "m-auto",
                "flex-col",
                "flex",
                "rounded",
                "shadow-2xl",
            ],
            div![div![
                class!["flex-col"],
                div![h2![title]],
                body,
                div![
                    button![
                        attrs! {At::Type => "button"},
                        class![
                            "mx-3"
                            "bg-red-500"
                            "hover:bg-red-400"
                            "text-white"
                            "font-bold"
                            "py-2"
                            "px-4"
                            "border-b-4"
                            "border-red-700"
                            "hover:border-red-500"
                            "rounded"
                        ],
                        simple_ev(Ev::Click, cancel_msg),
                        cancel_text
                    ],
                    button![
                        attrs! {At::Type => "button"},
                        class![
                            "mx-3"
                            "bg-green-500",
                            "hover:bg-green-400",
                            "shadow-xl",
                            "text-white",
                            "font-bold",
                            "py-2"
                            "px-4",
                            "border-b-4",
                            "border-green-700",
                            "hover:border-green-500",
                            "rounded"
                        ],
                        simple_ev(Ev::Click, confirm_msg),
                        confirm_text
                    ]
                ]
            ]]
        ]
    ]
}