Skip to content

Migrate GroupEvent from Material UI TextField to native HTML input #8276

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

Draft
Bouh wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Migrate GroupEvent from Material UI TextField to native HTML input #8276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a102bd5
Migrate GroupEvent from Material UI TextField to native HTML input
Bouh Feb 15, 2026
b2ec416
Update GroupEvent.js
Bouh Feb 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 45 additions & 31 deletions newIDE/app/src/EventsSheet/EventsTree/Renderers/GroupEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { t } from '@lingui/macro';

import * as React from 'react';
import classNames from 'classnames';
import TextField, { type TextFieldInterface } from '../../../UI/TextField';
import {
largeSelectedArea,
largeSelectableArea,
Expand All @@ -21,6 +20,19 @@ import { Trans } from '@lingui/macro';
import { dataObjectToProps } from '../../../Utils/HTMLDataset';
const gd: libGDevelop = global.gd;

const titleTextStyle = {
width: '100%',
fontSize: '1.3em',
fontFamily: 'inherit',
padding: '0px 0 0px 0px',
margin: 0,
backgroundColor: 'transparent',
outline: 0,
border: '1px solid transparent',
boxSizing: 'border-box',
lineHeight: '1.5em',
};

const styles = {
container: {
height: '2.5em',
Expand All @@ -29,9 +41,11 @@ const styles = {
padding: 5,
overflow: 'hidden',
},
title: {
fontSize: '1.3em',
width: '100%',
titleInput: titleTextStyle,
titleSpan: {
...titleTextStyle,
display: 'flex',
alignItems: 'center',
},
};

Expand All @@ -40,33 +54,36 @@ export default class GroupEvent extends React.Component<EventRendererProps, *> {
editing: false,
editingPreviousValue: null,
};
_textField: ?TextFieldInterface = null;
_inputField: ?HTMLInputElement = null;

edit = () => {
if (this.state.editing) return;
const groupEvent = gd.asGroupEvent(this.props.event);
if (!this.state.editingPreviousValue) {
this.setState({ editingPreviousValue: groupEvent.getName() });
}
this.setState(
{
editing: true,
editingPreviousValue: groupEvent.getName(),
},
() => {
if (this._textField) this._textField.focus();
const inputField = this._inputField;
if (inputField) {
inputField.focus();
inputField.selectionStart = inputField.value.length;
inputField.selectionEnd = inputField.value.length;
}
}
);
};

endEditing = () => {
this.setState({
editing: false,
});
const groupEvent = gd.asGroupEvent(this.props.event);
if (groupEvent.getName() !== this.state.editingPreviousValue) {
this.props.onEndEditingEvent();
this.setState({ editingPreviousValue: null });
}
this.setState({
editing: false,
editingPreviousValue: null,
});
};

render() {
Expand Down Expand Up @@ -100,41 +117,38 @@ export default class GroupEvent extends React.Component<EventRendererProps, *> {
}`}
>
{this.state.editing ? (
<TextField
margin="none"
ref={textField => (this._textField = textField)}
<input
ref={inputField => (this._inputField = inputField)}
type="text"
value={groupEvent.getName()}
translatableHintText={t`<Enter group name>`}
placeholder="..."
onBlur={this.endEditing}
onChange={(e, text) => {
groupEvent.setName(text);
onChange={e => {
groupEvent.setName(e.target.value);
this.forceUpdate();
}}
style={styles.title}
inputStyle={{
style={{
...styles.titleInput,
color: textColor,
WebkitTextFillColor: textColor,
}}
fullWidth
onKeyUp={event => {
if (shouldCloseOrCancel(event)) {
this.endEditing();
}
}}
onKeyDown={event => {
if (shouldValidate(event) || shouldSubmit(event)) {
if (
shouldCloseOrCancel(event) ||
shouldValidate(event) ||
shouldSubmit(event)
) {
this.endEditing();
}
}}
underlineShow={false}
spellCheck="false"
/>
) : (
<span
className={classNames({
[selectableArea]: true,
[disabledText]: this.props.disabled,
})}
style={{ ...styles.title, color: textColor }}
style={{ ...styles.titleSpan, color: textColor }}
{...dataObjectToProps({ editableText: 'true' })}
>
{groupEvent.getName() ? (
Expand Down
13 changes: 8 additions & 5 deletions newIDE/app/src/EventsSheet/EventsTree/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,15 @@
}

/**
* Remove default style of multiline textfield (for comment events) to remove
* the height change occurring when starting to edit the comment.
* Ensure group and comment event text fields match the display text style
*/
.gd-events-sheet .rst__rowTitle .MuiInput-multiline,
.gd-events-sheet .rst__rowTitle .MuiInputBase-input {
padding-bottom: 0;
.gd-events-sheet .rst__rowTitle .MuiInputBase-input,
.gd-events-sheet .rst__rowTitle .MuiInput-input {
padding: 0 !important;
padding-bottom: 0 !important;
line-height: 1.5em;
font-size: inherit;
height: auto;
}

/**
Expand Down