Overview

The grabber/resize tool is not supported in Safari iOS and Chrome iOS for Codex: TextArea and OOUI: MultilineTextInputWidget. Currently, the grabber tool is not present on iPhone and iPad devices.

Background

The Codex TextArea component uses the CSS resize property in two scenarios.

• resize: vertical
• resize: none

By default, the TextArea is autosize=false which applies the resize: vertical style and allows the users to manually resize the <textarea> vertically. Currently, this resize feature is not supported in iOS.

When the TextArea is autosize=true, the resize/grabber tool is not present. Therefore users cannot manually resize the <textarea>. When autosize is true, the <textarea> will automatically grow in height based on the content inside the <textarea>.

• Since resize isn't supported in iOS, we luck out because the resize tool is not present in the UI. The autosize feature works well in iOS and the resizing isn't needed here.

• In macOS, we removed the resize tool with CSS resize = none

TextArea with grabber/resizer

TextArea without grabber/resizer aka autosize= true

Known Issues

• CSS resize property is not supported by Safari on iOS 10.0-10.2, 10.3, 11.0-11.2, 11.3-11.4, 12.0-12.1, 12.2-12.5, 13.0-13.1, 13.2, 13.3, 13.4-13.7, 14.0-14.4, 14.5-14.8, 15.0-15. 1, 15.2-15.3, 15.4, 15.5 (ref: see image)
  
  
  

• CSS resize property is not supported by Chrome iOS

• Known devices affected are iPhone & iPad

• Safari iOS and Chrome iOS do not support the grabber tool in OOUI: MultilineTextInputWidget

• CSS selector -webkit-resizer is non-standard and should not be used without careful consideration. (ref: caniuse)
  • According to MDN, -webkit-resizer is non-standard and recommends checking cross-browser support before use. (ref: MDN)
    
    
    

• Resize tool is not displayed in Safari iOS mobile devices. I used Xcode Simulator for these images:
  • iPhone SE (2nd generation) - iOS 14.0
    
  • iPhone 14 Pro Max - iOS 16.4
    

Potential Approaches & Workarounds

• Document that resize is not supported in iOS so our users are aware of this behavior in iOS devices.

• Create a custom resizable textarea with its own custom resize tool. Inspired by this ref
  • Use mouse event listeners to track the user's interaction and update the size of the textarea.
  • To create a custom grabber tool, we'd need to design an icon and properly align it to the textarea.
  • Imitate the CSS resize tool's cursor style by using the CSS cursor property
    • cursor: ns-resize for resize vertical
  • Explore & test that this approach is supported across browsers.

Research

Are other component libraries and design systems supporting resize for iOS?

• Vuetify ❌

• Beufy ❌

• Atlassian Design System ❌

• Google Material UI ❌

Resources

• Codex documentation demos: TextArea

• OOUI demos: MultilineTextInputWidget

• Figma spec sheet

• Xcode Simulator to check iOS devices and different iOS versions

Questions

1. What's the best approach or workaround to implement support for the resize feature of TextArea for iPhone & iPad users?

2. What tools can I use to check browser support for Android devices?