Modify Text When Typing inside Text Box

[Evilsmaher]

Just a quick question I am not grasping really well:

How do I modify the actual text of the text box?

I can get the value I want to modify...

chat_pane_content: ClientAdminChatPaneContent,

Message::InputChanged(value) => {
				println!("Input Changed: {}", value); //Prints Correctly
				let x = &mut self.chat_pane_content; // 1
				x.input_value = value; //2 Doesn't Change the actual contents of the box.
			}

But, not really sure how to correctly change it.

My program has a pane_grid::State<MyStruct> where MyStruct { input: text_input::State, .. } but not it's not modifying the actual text. This code compiles, it just doesn't do anything.

How can I change the text of the text_input?

[GiulianoCTRL]

You need an additional struct member for your text value (String).
This should then be used in your update method for your struct.

struct MyStruct {
    text_input: text_input::State,
    text_value: String,
}

#[derive(Debug, Clone)]
enum Message {
    InputChanged(String),
}

impl Sandbox for MyStruct {
    type Message = Message;

    fn new() -> Self {
        Self::default()
    }

    fn title(&self) -> String {
        String::from("MyApp")
    }

    fn update(&mut self, message: Message) {
        match message {
            Message::InputChanged(value) => {
                self.text_value = s;
            }
        }
    }

    fn view(&mut self) -> Element<Message> {
        let search_field = TextInput::new(
            &mut self.text_input,  // The previously declared state
            "Some place holder", 
            &self.text_value,  // The string to be used on each update
            Message::InputChanged,  // What happens on changed
        );
    // Rest of your GUI
    }

[13r0ck]

My bad, forgot some stuff on the previous comment. For the first "bundle" for the application you need to impl Sanbox for or impl Application for

impl Sandbox for ClientAdminChatPaneContent {
    type Message = Message;
 // code
}

Also your Message on the text_input does not match what your enum then both need to be "MessageName::EnumOption"

also a few other things :)

1. ClientAdminChatPaneContent is way too long of a name, just use AdminChat, or even just Chat, keeping it as short as possible makes it easier to read.
2. Be cause the .push() (and most other iced methods) returns the Element you can chain the push commands together thus:

		let mut content = Column::new()
			.spacing(5);

		content = content.push(scroll_container);
		content = content.push(text_input_container);

becomes:

let content = Column::new()
    .push(scroll_container)
    .push(test_input_container)
    .spacing(5);

Also usually if you want the page to scroll like a webpage you should use the Scrollable as your last return. For example, from the todos example

                let content = Column::new()
                    .max_width(800)
                    .spacing(20)
                    .push(title)
                    .push(input)
                    .push(controls)
                    .push(tasks);

                Scrollable::new(scroll)
                    .padding(40)
                    .push(
                        Container::new(content).width(Length::Fill).center_x(),
                    )
                    .into()

3. Also SUPER pedantic, but usually the highest level enum message is just called Message

[13r0ck]

If you have any other questions the zulip chat is a better place, git issues is best for PRs and iced bugs (Don't worry I did the same thing too 😄 )

[Evilsmaher]

Access to that site is sadly blocked from my stations at work. Oddly enough, Github works. I hope it would be alright if I got this matter resolved here real quick?

1. Regarding my scrollable -- I have a scrollable + text input inside a continer - I don't want the text input to scroll within my container - thus I have broken them up and created a larger container.
2. .push() - Makes sense, I didn't realize, thanks!
3. Naming conventions I am still working on regarding Rust :)
4. Although it is named incorrectly here , I have ChatPaneMessage::InputChanged working, with the same exception from above: the actual content of the text_input does not change - it still says ironman. When I type in the box it will execute the function:

fn update(&mut self, message: ChatPaneMessage) {
	match message {
		ChatPaneMessage::InputChanged(value) => {
			println!("Input Changed: {}", value);
			self.input_value = value;
		}
	}
}

and let's say I type in the box - I press "a" - my output is

Ironmana

but the input_text content doesn't change. So when I type a "b" in the box again, it is now

Ironmanb

I can get the function to call - but cannot get the content of the text_input to change.

[13r0ck]

tada

use iced::{
    scrollable, text_input, Align, Column, Container, Element, Length, Sandbox, Scrollable,
    Settings, TextInput,
};

#[derive(Default)]
struct ClientAdminChatPaneContent {
    scroll: scrollable::State,
    input: text_input::State,
    input_value: String,
}

pub fn main() -> iced::Result {
    ClientAdminChatPaneContent::run(Settings::default())
}

#[derive(Debug, Clone)]
enum ChatPaneMessage {
    InputChanged(String),
}

impl Sandbox for ClientAdminChatPaneContent {
    type Message = ChatPaneMessage;

    fn title(&self) -> String {
        String::from("Input - Iced")
    }

    fn new() -> Self {
        ClientAdminChatPaneContent {
            scroll: scrollable::State::new(),
            input: text_input::State::new(),
            input_value: String::from("Ironman"),
        }
    }

    fn update(&mut self, message: ChatPaneMessage) {
        match message {
            ChatPaneMessage::InputChanged(value) => {
                println!("Input Changed: {}", value);
                self.input_value = value;
            }
        }
    }

    fn view(&mut self) -> Element<ChatPaneMessage> {
        //Text Input
        let input = TextInput::new(
            &mut self.input,
            "Message to Client",
            &self.input_value,
            ChatPaneMessage::InputChanged,
        )
        .padding(15)
        .size(30);

        let text_input_container: Container<ChatPaneMessage> = Container::new(input)
            .width(Length::Fill)
            .height(Length::Units(80))
            .padding(10);

        let scroll = Scrollable::new(&mut self.scroll)
            .width(Length::Fill)
            .spacing(10)
            .align_items(Align::Start);

        let scroll_container: Container<ChatPaneMessage> = Container::new(scroll)
            .width(Length::Fill)
            .height(Length::Fill)
            .padding(10);

        let content = Column::new()
            .push(scroll_container)
            .push(text_input_container)
            .spacing(5);

        Container::new(content)
            .width(Length::Fill)
            .height(Length::Fill)
            .padding(5)
            .center_y()
            .into()
    }
}

Your use of messages was inconsistent, they all need to be of the same type.

[Evilsmaher]

You are a beautiful person! I apologize for your time - but I have found the problem :) Just for your info - or anyone else who was dumb enough to do what I did:

What I did was save Both the pane_grid::State<ClientAdminChatPaneContent> and ClientAdminChatPaneContent as different variables. But, because the pane_grid::State takes it as input, I tried cloning it... as below:

Note: I want the chat to call a higher Message so I can do more in the bigger picture than just what a ChatPaneMessage can do - so I will call Message:InputChanged(value) which will call ChatPaneMessage::InputChanged(value) thus the text_input will call the Message enum.

struct ClientAdminGUI {
    chat_pane: pane_grid::State<ClientAdminChatPaneContent>,
    chat_pane_content: ClientAdminChatPaneContent,
}

impl Application for ClientAdminGUI {
    fn new -> Self {
        let chat_pane_content_value: ClientAdminPaneChatContent::new();
        let chat_pane_content = chat_pane_content_value.clone();
        let (chat_pane, _) = pane_grid::State::new(chat_pane_content_value);
        ClientAdminGUI {
            chat_pane, 
            chat_pane_content,
        }
    }
}

BUT, the clone is an entirely different object than that of the original ClientAdminChatPaneContent so the one I am typing in is not the actual text_input that is receiving and drawn to the window.

Solution Below:

struct ClientAdminGUI {
    chat_pane: pane_grid::State<ClientAdminChatPaneContent>
}


#[derive(Debug, Clone)]
enum Message {
    InputChanged(String),
}

impl Application for ClientAdminGUI {
    fn new() -> Self {
        let (chat_pane, _) = pane_grid::State::new(ClientAdminPaneChatContent::new());

        ClientAdminGUI {
            chat_pane,
        }
    }
    fn update(&mut self, message: Message) {
        match message {
            Message::InputChanged(value) => {
                let chat_pane = self.chat_pane.iter_mut().next().unwrap().1;
                chat_pane.update(ChatPaneMessage::InputChanged(value));
            }
        }
    }
    
}

#[derive(Default)]
struct ClientAdminChatPaneContent {
    scroll: scrollable::State,
    input: text_input::State,
    input_value: String,
}

#[derive(Debug, Clone)]
enum ChatPaneMessage {
    InputChanged(String),
}

impl ClientAdminChatPaneContent {
    fn new() -> Self {
        ClientAdminChatPaneContent {
            scroll: scrollable::State::new(),
            input: text_input::State::new(),
            input_value: String::from("Ironman"),
        }
    }

    fn update(&mut self, message: ChatPaneMessage) {
        match message {
            ChatPaneMessage::InputChanged(value) => {
                println!("Input Changed: {}", value);
                self.input_value = value;
            }
        }
    }

    fn view(&mut self) -> Element<ChatPaneMessage> {
        //Text Input
        let input = TextInput::new(
            &mut self.input,
            "Message to Client",
            &self.input_value,
            Message::InputChanged,
        )
        .padding(15)
        .size(30);

        let text_input_container: Container<ChatPaneMessage> = Container::new(input)
            .width(Length::Fill)
            .height(Length::Units(80))
            .padding(10);

        let scroll = Scrollable::new(&mut self.scroll)
            .width(Length::Fill)
            .spacing(10)
            .align_items(Align::Start);

        let scroll_container: Container<ChatPaneMessage> = Container::new(scroll)
            .width(Length::Fill)
            .height(Length::Fill)
            .padding(10);

        let content = Column::new()
            .push(scroll_container)
            .push(text_input_container)
            .spacing(5);

        Container::new(content)
            .width(Length::Fill)
            .height(Length::Fill)
            .padding(5)
            .center_y()
            .into()
    }
}

TLDR:

Programming 101: Don't be a dingus and clone objects just to reference them later - they aren't the same object :)

[ericguedespinto]

Hi all
On a related note, I would like to adjust the width of the text_input so that the text_input expands and shrinks to fit the value.
I tried to set the width to Lenght::Shrink and other variants but this either fills all the available space or shrink to nothing. What I want is for the size to be just enough to fit the text value, but I can't find a way to do this.
What am I missing?
Thanks for the help