Allow read-only TextBox to look like a non-read-only

[howudodat]

I use a textbox as the edit field that on click launches a dialog chooser. If the TextBox is not read-only when the user clicks, my dialog opens, but the I-Beam cursor is left in the edit field. Setting it to read-only prevents that, but I want the field to look normal. Similar to DateBox

here is a skeleton that can easily be used to test

	public class PickerBox extends TextBox {
		protected DlgPicker modal = null;
		
		public PickerBox(String sPlaceholder) {
		    this.addClickListener(l->{ open(); });
		    this.setPlaceholder(sPlaceholder);
		    this.setLabel(" ");
		}
		
		protected void open() {
			if (modal == null) {
				this.modal = new DlgPicker();
			}

			modal.open();
		}
		
		protected class DlgPicker extends Dialog { 
			protected DivElement header = div().addCss(dui_flex, dui_flex_row);
			protected DivElement content = div().addCss(dui_flex, dui_flex_row);
			public DlgPicker() {
				super();
				init(this);
			    setStretchWidth(DialogSize.MEDIUM);
			    setStretchHeight(DialogSize.VERY_LARGE);
			    setAutoClose(false);
			    initHeader();
			    initContent();
			}
			
			protected void initHeader() {
				NavBar nav = NavBar.create().addCss(dui_dialog_nav);
				nav.setTitle("Test");
				getHeader().appendChild(nav);
				nav.appendChild(PostfixAddOn.of((Icons.close().clickable().addClickListener(e -> onOk()))));
			}
			
			protected void initContent() {
				AutoVScrollPanel sp = AutoVScrollPanel.create()
					.addCss(dui_w_full)
					.setHeight("calc(100vh - 250px)");		

				for (int x=1; x<25; x++) {
					MySwitchButton sb = new MySwitchButton("Test "+x);
					sb.addClickListener(l->onRow(sb));
					sp.appendChild(sb);
				}
				content.appendChild(sp);
				this.getContentBody().appendChild(content);
			}
			
			protected void onRow(MySwitchButton sb) {
				this.close();
			}
			protected void onOk() {
				this.close();
			}
		}
		
		protected class MySwitchButton extends SwitchButton {
			public MySwitchButton(String label) {
				super();
				setOffTitle(label);
				addCss(dui_flex, dui_w_full, dui_hide_label);
				getOffLabelElement().element().addCss(dui_flex, dui_grow_1);
			    this.style().setCssProperty("border-bottom", "solid");
			}
		}
}

[vegegoku]

Use the css class dui_undimmed with a read-only form field to achieve the needed result.