8000 Make `TextInput` wrap / `TextArea` ideas · Issue #44 · MoonZoon/MoonZoon · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Make TextInput wrap / TextArea ideas #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
databasedav opened this issue Dec 2, 2021 · 5 comments
Open

Make TextInput wrap / TextArea ideas #44

databasedav opened this issue Dec 2, 2021 · 5 comments

Comments

@databasedav
Copy link
Contributor

TextInput should be able to wrap after exceeding it's width, additionally, i think it's resizability should also be built in, e.g. after it's height is exceeded, it will continue to get bigger until reaching a maximum height at which point a scroll bar would appear, exactly like this github text box (i'm not sure if this is a built in feature of textarea so just wanted to mention it explicitly)
@MartinKavik
Copy link
Member

We can write a new element MultilineInput, leveraging the native textarea element. The behavior you've suggested sounds good.

@MartinKavik MartinKavik mentioned this issue Mar 28, 2022
Closed
@MartinKavik MartinKavik mentioned this issue Apr 25, 2022
Closed
@MartinKavik
Copy link
Member

Basic TextArea has been merged in the PR #92 (based on the PR #90).

Todos / things to consider:

  • Autoresize. Both horizontal and vertical? (See previous comments.)
  • Vertical autoresize by default?
  • Allow only vertical manual 8000 resize by default?
  • Add new style Resize (impl Style)? (MDN CSS resize)
  • How to resolve its mobile version? (textarea behaves and looks differently on phones.)
  • @lindahageselle Add your name to the text_area example Cargo.tomls.

@databasedav
Copy link
Contributor Author

some more todos:

  • expose all TextArea attributes
  • make TextArea respect Width::fill, right now the width is static even when its container's width changes (although this might be fixed by simply disabling resize
  • expose lower level event handle on .on_key_down_event so we can call event.prevent_default() to prevent this behavior

@databasedav
Copy link
Contributor Author

note i handled the 3rd bullet point by doing this

.update_raw_el(|raw_el| {
    raw_el.event_handler_with_options(
        EventOptions::new().preventable(),
        |event: dominator::events::KeyDown| {
            if event.key() == "Enter" {
                event.prevent_default();
                ...  // handle enter
            }
        })
    )
})

@MartinKavik
Copy link
Member

@databasedav

expose lower level event handle on .on_key_down_event so we can call event.prevent_default() to prevent this behavior

You can access the lower level event from Zoon's KeyboardEvent:

MoonZoon/crates/zoon/src/element/ability/keyboard_event_aware.rs

Lines 30 to 33 in 5a1e6dc

pub struct KeyboardEvent {
key: Key,
pub raw_event: RawKeyboardEvent,
}

It's demonstrated in the keyboard example:

MoonZoon/examples/keyboard/frontend/src/main.rs

Lines 21 to 31 in 5a1e6dc

.on_key_down_event_with_options(EventOptions::new().preventable(), |event| {
let RawKeyboardEvent::KeyDown(raw_event) = &event.raw_event;
if raw_event.repeat() || not(raw_event.shift_key()) {
return;
}
if let Key::Other(key) = event.key() {
if key == "Tab" {
// @TODO `.prevent_default()` should be callable only on a preventable event.
raw_event.prevent_default();

@MartinKavik MartinKavik changed the title make TextInput wrap (optionally?) Make TextInput wrap / TextArea ideas Oct 14, 2022
@MartinKavik MartinKavik changed the title Make TextInput wrap / TextArea ideas Make TextInput wrap / TextArea ideas Oct 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MartinKavik @databasedav
0