input_otp: replace otp.js with pure Rust and fix demo structure#35
input_otp: replace otp.js with pure Rust and fix demo structure#35krishpranav wants to merge 2 commits intorust-ui:mainfrom
Conversation
Replace the OTP JavaScript controller with a Rust/web_sys implementation and wire InputOTP to initialize it directly. Update the docs demo so each OTP scenario renders as an independent block with its own local Preview and Code controls, and bypass the shared demo wrapper toolbar for the OTP page so the layout matches the intended structure.
There was a problem hiding this comment.
@krishpranav Thanks for the contribution! The core direction is right — removing the JS file and porting to web_sys is exactly what the issue asked for. Two things to address before this can be merged.
| }) as Box<dyn FnMut(web_sys::Event)>); | ||
|
|
||
| let _ = target.add_event_listener_with_callback("beforeinput", listener.as_ref().unchecked_ref()); | ||
| listener.forget(); |
There was a problem hiding this comment.
Memory leak — listener.forget() leaks the closure because there is no cleanup path. The same closure pattern is used in use_input_otp.rs via _listeners: Vec<Listener> which cleans up on drop — this beforeinput listener should follow the same approach. Using .forget() is usually a last resort in WASM; here it can be avoided by storing the closure in the _listeners vec so it gets dropped with the controller.
| pub fn StaticDemoWrapper(demo_type: MarkdownType, children: Children) -> impl IntoView { | ||
| let current_tab = RwSignal::new(Tab::default()); | ||
| let use_embedded_blocks = matches!(demo_type, MarkdownType::StaticDemoInputOtp); | ||
|
|
There was a problem hiding this comment.
This use_embedded_blocks flag was not part of issue #26 — the issue only asked to replace otp.js with Rust. Modifying StaticDemoWrapper to hardcode a special case for OTP is a smell: it couples a generic wrapper to a specific component, and it will need to be repeated for every future component that wants the same behavior. Please revert the changes to demo_input_otp.rs and static_demo_wrapper.rs and open a separate issue/PR if the demo layout needs improvement.
|
@max-wells the changes are done. kindly review it |
|
Thanks for the contribution! The core Rust port was solid — I applied the relevant changes (use_input_otp hook, input_otp.rs wiring, otp.js removal, registry updates) cleanly on main, rebased on top of the latest markdown crate work. The demo restructuring was left out to keep demo_input_otp.rs consistent with the rest of the project. |
2 participants
Description:
The OTP component still depended on a JavaScript controller and the docs page was rendering the OTP demos through one shared wrapper that made the layout feel wrong.
This patch moves the OTP controller into Rust with
web_sys, removes the runtime JS file, and restructures the Input OTP docs page so each demo block behaves independently with its own local Preview and Code controls.What changed:
web_sysimplementation inuse_input_otpInputOTPto initialize the Rust controller directly and removed the script tagpublic/app_components/otp.jsdemo_input_otp.rsso the OTP page renders independent demo blocks for basic input, 4-digit variant, digit filter, focus/blur, and post-hydration initValidation:
Screenshot
Closes #26