Fix suggestions positioning using CompositedTransformFollower to properly position dropdown below TextField
This commit is contained in:
@@ -38,6 +38,7 @@ class _OrganizationSettingsDialogState
|
||||
List<User> _userSuggestions = [];
|
||||
late final TextEditingController usernameController;
|
||||
final GlobalKey textFieldKey = GlobalKey();
|
||||
final LayerLink link = LayerLink();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
@@ -509,45 +510,48 @@ class _OrganizationSettingsDialogState
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextField(
|
||||
key: textFieldKey,
|
||||
controller: usernameController,
|
||||
cursorColor: AppTheme.accentColor,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Username',
|
||||
hintStyle: TextStyle(color: AppTheme.secondaryText),
|
||||
contentPadding: const EdgeInsets.all(12),
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||
CompositedTransformTarget(
|
||||
link: link,
|
||||
child: TextField(
|
||||
key: textFieldKey,
|
||||
controller: usernameController,
|
||||
cursorColor: AppTheme.accentColor,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Username',
|
||||
hintStyle: TextStyle(color: AppTheme.secondaryText),
|
||||
contentPadding: const EdgeInsets.all(12),
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: AppTheme.accentColor),
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: AppTheme.accentColor),
|
||||
),
|
||||
),
|
||||
style: TextStyle(color: AppTheme.primaryText),
|
||||
onChanged: (value) async {
|
||||
if (value.length > 2) {
|
||||
try {
|
||||
_userSuggestions = await widget.orgApi.searchUsers(
|
||||
widget.organization.id,
|
||||
value,
|
||||
);
|
||||
} catch (e) {
|
||||
style: TextStyle(color: AppTheme.primaryText),
|
||||
onChanged: (value) async {
|
||||
if (value.length > 2) {
|
||||
try {
|
||||
_userSuggestions = await widget.orgApi.searchUsers(
|
||||
widget.organization.id,
|
||||
value,
|
||||
);
|
||||
} catch (e) {
|
||||
_userSuggestions = [];
|
||||
}
|
||||
setState(() {});
|
||||
} else {
|
||||
_userSuggestions = [];
|
||||
setState(() {});
|
||||
}
|
||||
setState(() {});
|
||||
} else {
|
||||
_userSuggestions = [];
|
||||
setState(() {});
|
||||
}
|
||||
},
|
||||
},
|
||||
),
|
||||
),
|
||||
DropdownButtonFormField<String>(
|
||||
initialValue: selectedRole,
|
||||
@@ -645,11 +649,11 @@ class _OrganizationSettingsDialogState
|
||||
|
||||
if (_userSuggestions.isNotEmpty) {
|
||||
children.add(
|
||||
Positioned(
|
||||
top: 240,
|
||||
left: 0,
|
||||
right: 0,
|
||||
CompositedTransformFollower(
|
||||
link: link,
|
||||
offset: const Offset(0, 48),
|
||||
child: Container(
|
||||
width: 300,
|
||||
height: 100,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.primaryBackground,
|
||||
|
||||
Reference in New Issue
Block a user