AI & Agent Dev Bug Sandbox Back to Radar

Mobile Filter Form In Supabase Dashboard Does Not Submit On Android Chrome

On Android Chrome, the Authentication → Users filter form has no visible submit button, and pressing the keyboard's enter/go key does not trigger the filter. The form does not submit on mobile or desktop versions, but the issue is most severe on mobile where no button exists.

mediumConfidence 55%React

Origin Analysis

The filter form likely lacks a dedicated submit button and does not properly handle the form's onSubmit event. Mobile browsers often do not fire a submit event when the enter key is pressed unless a submit button or input type="submit" is present, leaving users unable to apply filters.

1. Open Supabase dashboard on Android Chrome. 2. Navigate to Authentication → Users. 3. Tap the filter option for email or user ID. 4. Enter a search query. 5. Press the keyboard's enter/go key or look for a submit button. 6. Observe that nothing happens and the filter is not applied.

Fixing Code Block

import React from 'react';
import { useForm } from 'react-hook-form';
import { Input, Button } from '@supabase/ui';

interface FilterFormProps {
  onFilter: (value: string) => void;
}

const FilterForm: React.FC<FilterFormProps> = ({ onFilter }) => {
  const { register, handleSubmit } = useForm<{ filter: string }>();

  return (
    <form onSubmit={handleSubmit((data) => onFilter(data.filter))} className="flex w-full items-center gap-2">
      <Input
        {...register('filter', { required: true })}
        placeholder="Filter by email or user ID"
        className="flex-1"
        type="search"
      />
      <Button type="submit" htmlType="submit">Apply</Button>
    </form>
  );
};

export default FilterForm;

Adds an explicit submit button with type="submit" and moves the filter input into a form with an onSubmit handler. This ensures that both tapping the button and pressing the enter key on mobile keyboards will trigger the filter action, as the presence of a submit button makes the form submittable on all browsers.

Edge Case Audit

Adding a button may alter the existing UI layout and could introduce regressions in desktop styling or unintended double submissions if the form is submitted multiple times. If the original implementation relied on auto-submit after typing, this change may change that behaviour. Roll back by removing the button and restoring the previous input-only component, but ensure an alternative submission mechanism (e.g., enter key handler) is implemented to maintain mobile usability.