Skip to content

Commit

Permalink
fix: only move dropdown on init
Browse files Browse the repository at this point in the history 
This fixes also the select issue with the label placement. The impact
is not tested, but in that case we should offer a relocate function to
move the dropdown manually.
  • Loading branch information
@wuda-io
wuda-io committed Feb 24, 2025
1 parent 1127482 commit d259c96
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 37 deletions.
21 changes: 10 additions & 11 deletions sass/components/forms/_input-fields.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,18 @@ textarea.materialize-textarea {
width: 100%;
font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
height: 56px; // 56dp
background-color: transparent;
}

%invalid-input-style {
border-bottom: 2px solid var(--md-sys-color-error);
box-shadow: 0 1px 0 0 var(--md-sys-color-error);
}

%hidden-text > span {
display: none
}

%custom-error-message {
content: attr(data-error);
color: var(--md-sys-color-error);
Expand All @@ -47,12 +50,9 @@ textarea.materialize-textarea {

input, textarea {
box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/

padding: 0 16px;
padding-top: 20px;

background-color: var(--md-sys-color-surface);

//background-color: transparent; //background-color: var(--md-sys-color-surface);
border: none; // reset
border-radius: 4px; // md.sys.shape.corner.extra-small.top
border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
Expand Down Expand Up @@ -173,13 +173,14 @@ textarea.materialize-textarea {

// Outlined

// todo: use this approach for floating labels with outline
// https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9

&.outlined {

input, textarea {
padding-top: 0;

background-color: var(--md-sys-color-background);

background-color: transparent; //(--md-sys-color-background);
border: 1px solid var(--md-sys-color-on-surface-variant);
border-radius: 4px; // md.sys.shape.corner.extra-small

Expand All @@ -189,6 +190,7 @@ textarea.materialize-textarea {
margin-left: -1px; // subtract border-width

}

// Label
&:focus:not([readonly]) + label {
color: var(--input-color);
Expand All @@ -200,14 +202,13 @@ textarea.materialize-textarea {
left: 16px;
margin-left: -4px;
padding: 0 4px;
background-color: var(--md-sys-color-background);
background-color: transparent; //var(--md-sys-color-background);
}

&:disabled, &[readonly="readonly"] {
color: rgba(var(--md_sys_color_on-surface), 0.38);
border-color: rgba(var(--md_sys_color_on-surface), 0.12);
}

}
}

Expand Down Expand Up @@ -238,7 +239,6 @@ textarea.materialize-textarea {
.searchbar {
.prefix {
position: absolute;
//left: 12px;
padding-left: 1rem;
top: 0;
user-select: none;
Expand Down Expand Up @@ -307,7 +307,6 @@ textarea {
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
padding-top: 1.2rem; /* prevents text jump on Enter keypress */

// Reduces repaints
position: absolute;
top: 0;
Expand Down
25 changes: 12 additions & 13 deletions src/dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
this.el.ariaExpanded = 'false';

// Move dropdown-content after dropdown-trigger
this._moveDropdown();
this._moveDropdownToElement();
this._makeDropdownFocusable();
this._setupEventHandlers();
}
Expand Down Expand Up @@ -216,7 +216,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {

_handleClick = (e: MouseEvent) => {
e.preventDefault();
this._moveDropdown((<HTMLElement>e.target).closest('li'));
//this._moveDropdown((<HTMLElement>e.target).closest('li'));
if (this.isOpen) {
this.close();
} else {
Expand All @@ -225,7 +225,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
};

_handleMouseEnter = (e) => {

Check failure on line 227 in src/dropdown.ts

View workflow job for this annotation

GitHub Actions / build 

'e' is defined but never used

Check failure on line 227 in src/dropdown.ts

View workflow job for this annotation

GitHub Actions / build 

'e' is defined but never used
this._moveDropdown((<HTMLElement>e.target).closest('li'));
//this._moveDropdown((<HTMLElement>e.target).closest('li'));
this.open();
};

Expand Down Expand Up @@ -388,17 +388,16 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
this.dropdownEl.style.transformOrigin = '';
}

// Move dropdown after container or trigger
_moveDropdown(containerEl: HTMLElement = null) {
if (!!this.options.container) {
_moveDropdownToElement(containerEl: HTMLElement = null) {
if (this.options.container) {
this.options.container.append(this.dropdownEl);
} else if (containerEl) {
if (!containerEl.contains(this.dropdownEl)) {
containerEl.append(this.dropdownEl);
}
} else {
this.el.after(this.dropdownEl);
return;
}
if (containerEl) {
if (!containerEl.contains(this.dropdownEl)) containerEl.append(this.dropdownEl);
return;
}
this.el.after(this.dropdownEl);
}

_makeDropdownFocusable() {
Expand Down Expand Up @@ -584,7 +583,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
if (getComputedStyle(closestOverflowParent).position === 'static')
closestOverflowParent.style.position = 'relative';

this._moveDropdown(closestOverflowParent);
//this._moveDropdown(closestOverflowParent);

// Set width before calculating positionInfo
const idealWidth = this.options.constrainWidth
Expand Down
5 changes: 2 additions & 3 deletions src/forms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export class Forms {
// So we set the height to the original one
textarea.style.height = originalHeight + 'px';
}
textarea.setAttribute('previous-length', textarea.value.length.toString());
textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
}

static Init() {
Expand Down Expand Up @@ -158,9 +158,8 @@ export class Forms {
static InitTextarea(textarea: HTMLTextAreaElement) {
// Save Data in Element
textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
textarea.setAttribute('previous-length', textarea.value.length.toString());
textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
Forms.textareaAutoResize(textarea);

textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
}
Expand Down
13 changes: 3 additions & 10 deletions src/select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,6 @@ export class FormSelect extends Component<FormSelectOptions> {

_setupDropdown() {
this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
if (this.labelEl) this.labelEl.style.display = 'none';

this.wrapper = document.createElement('div');
this.wrapper.classList.add('select-wrapper', 'input-field');
Expand Down Expand Up @@ -291,7 +290,7 @@ export class FormSelect extends Component<FormSelectOptions> {

// Initialize dropdown
if (!this.el.disabled) {
const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
const dropdownOptions = { ...this.options.dropdownOptions };
dropdownOptions.coverTrigger = false;
const userOnOpenEnd = dropdownOptions.onOpenEnd;
const userOnCloseEnd = dropdownOptions.onCloseEnd;
Expand Down Expand Up @@ -333,14 +332,8 @@ export class FormSelect extends Component<FormSelectOptions> {
}
// Add initial selections
this._setSelectedStates();

// Add Label
if (this.labelEl) {
const label = document.createElement('label');
label.htmlFor = this.input.id;
label.innerText = this.labelEl.innerText;
this.input.after(label);
}
// move label
if (this.labelEl) this.input.after(this.labelEl);
}

_addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement) {
Expand Down

0 comments on commit d259c96

Please sign in to comment.